JSFiddle - React, Tailwind, and code Playground

by shyamh

HTML

<div id="my_div">
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></div>
</div> 
<div>MouseEnter: <span id="mouseenter">0</span></div>
<div>MouseOut: <span id="mouseout">0</span></div>
<br />
<div>MouseOver: <span id="mouseover">0</span></div>
<div>MouseLeave: <span id="mouseleave">0</span></div>

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;
}

JavaScript

var $my_div = $('#my_div'),
    my_div = $my_div[0];

$('#my_div').bind("mouseover mouseenter mouseleave mouseout", function (e) {
		console.log(e.target.id + ' ' + e.type);
    if(e.target == my_div) {
      var el = $("#" + e.type);
      var n = + el.text();
      el.text(++n);
    }
});