JSFiddle - React, Tailwind, and code Playground

by redbmk

HTML

<div class="outside">
    <div class="inside">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>

<a id="more" href="javascript:return false">Hover more</a>
<a id="less" href="javascript:return false">Hover less</a>

CSS

.outside {
    border-style: solid;
    border-color: red;
    padding:10px;
}

.inside {
    border-style: solid;
    border-color: blue;
    background-color: white;
    padding: 5px;
}

.inside div {
    padding: 5px;
    margin: 5px;
    border-style: solid;
}

.hover {
    background-color: yellow;
}

JavaScript

function bindHover(dpDiv) {
    var selector = '.inside div';
    return dpDiv.bind('mouseout', function(event) {
        var elem = $(event.target).closest(selector);
        if (!elem.length) {
            return;
        }
        elem.removeClass("hover");
    }).bind('mouseover', function(event) {
        var elem = $(event.target).closest(selector);
        if (!elem.length) {
            return;
        }
        elem.parents('.inside').find('div').removeClass('hover');
        elem.addClass('hover');
    });
}

function hoverMoreOut(event) {
    $('.hover').removeClass('hover');
}

function hoverMoreIn(event) {
    var selector = '.inside div';
    var elem = $(event.target).closest(selector);
    if (!elem.length) {
        return;
    }
    elem.parents('.inside').find('div').removeClass('hover');
    elem.add(elem.prev()).add(elem.next()).addClass('hover');
}

$(function() {
    bindHover($('.outside'));

    $('#more').click(function() {
        $('.inside').bind('mouseover', hoverMoreIn).bind('mouseout', hoverMoreOut);
    });
    $('#less').click(function() {
        $('.inside').unbind('mouseover');
    });
});