JSFiddle - React, Tailwind, and code Playground

HTML

<p>This document demonstrates a bug where the mouseenter event doesn't fire,
even though it should. The bug should be reproduceable in all major browser
(tested FF 3.6.13; IE{6,7,8}; Chrome 10.0.648.204; Safari 5.0.4). To see the
bug, move the pointer over the second "This div was entered"-line, then move
the pointer up into the first "This div was entered"-line. The number of the
first line doesn't increase, even though it should.</p>
<div id="div1">
    <div>This div was entered <span id="num1">0</span> times.</div>
</div>
<div id="div2">
    <div>This div was entered <span id="num2">0</span> times.</div>
</div>

CSS

#div1 {
    background:red;   
}

#div2 {
    background:green;   
}

JavaScript

var num1 = 0, num2 = 0;

$(document).ready(function(){
    $('#div1').mouseenter(function(){
        num1++;
        $('#num1').html(num1);
    });
    
    $('#div2').hover(function(){
        num2++;
        $('#num2').html(num2);
        $('#div2').prepend('<div class="added">This div was inserted at the mouseenter event and removed at mouseleave.</div>');
    }, function(){
        $('.added').remove();
    });
});