JSFiddle - React, Tailwind, and code Playground

HTML

<div id="my_div">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div> 
<div>MouseEnter: <span id="mouseenter">0</span></div>
<div>MouseOver: <span id="mouseover">0</span></div>
<div>MouseLeave: <span id="mouseleave">0</span></div>
<button id="resetCounters">Reset</button>

CSS

#my_div
{
    padding: 0 40px 40px 0;
    background-color: #eee;
    margin-bottom: 20px;
    width: 180px;
    overflow: hidden;
}
#my_div > div
{
    float: left;
    margin: 40px 0 0 40px;
    height: 50px;
    width: 50px;
    background-color: #aaa;
}
#resetCounters
{
    margin-top: 16px;
}
body
{
    font-family: sans-serif;
}

JavaScript

$('#my_div').bind("mouseover mouseenter mouseleave", function (e) {
    var el = $("#" + e.type);
    var n = + el.text();
    el.text(++n);
});
$("#resetCounters").click(function(e){
    e.preventDefault();
    $("span").text(0);
});