JSFiddle - React, Tailwind, and code Playground

by Matthew Marcus

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="root">
    <div class="donthover"> <span>hover shouldn't fire</span>

        <div class="dontHoverChild"> <span>hover shouldn't fire</span>

        </div>
    </div>
    <div class="hover"> <span>This should hover</span>

    </div>
    <div class="hover"> <span>This should hover</span>

    </div>
    <div class="hover"> <span>This should hover</span>

    </div>
    <div class="hover"> <span>This should hover</span>

    </div>
    <div class="hover"> <span>This should hover</span>

    </div>
    <div class="hover"> <span>This should hover</span>

    </div>
    <div class="hover"> <span>This should hover</span>

    </div>
    <div class="hover"> <span>This should hover</span>

    </div>
    <div class="hover"> <span>This should hover</span>

    </div>
</div>
<button id="addNoHover">Replace w/ no-hover Div</button>
<button id="addHover">Add hover Div</button>

CSS

#root {
    border: 1px solid red;
    padding:10px;
}
#root div {
    height: 60px;
    border: 1px solid blue;
    margin: 5px 0;
}
#root div.dontHoverChild {
    height:40px;
    width: 75%;
    margin: 10px auto;
}
#root span {
    float:left;
}
}

JavaScript

var hoverListener = function (e) {
    console.log($(e.target));
    if (e.type == 'mouseenter') {
        $(e.target).css('border-color', 'red');
    } else {
        $(e.target).css('border-color', 'blue');
    }
};

$('#root').on('mouseenter mouseleave', '*:not(div.donthover, div.dontHoverChild, div.cp_element, span)', {
    something: "toPassIn"
}, hoverListener);

$('#addNoHover').on('click', function () {
    var $replaceDiv = $('#root').find('.hover').last();
    $replaceDiv.replaceWith($('<div class="cp_element"><span>hover SHOULD NOT fire</span></div>'));
});
$('#addHover').on('click', function () {
    $('#root').append($('<div class="hover"><span>hover SHOULD fire</span></div>'));
});