You can edit / change the code and click run button <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>mouseenter demo</title> <style> div.out { width: 35%; height: 140px; padding:10px; color: white; margin: 0 20px; background-color: gray; float: left; } div.in { width: 70%; height: 70%; padding:10px; color:black; background-color: cyan; margin: 10px auto; } p { line-height: 1em; margin: 0; padding: 0; } </style> <script src="../../../jquery-1.10.2.js"></script> <script>var clicky_site_ids = clicky_site_ids || []; clicky_site_ids.push(101319977);</script><script async src="//static.getclicky.com/js"></script> <b>Move your cursor on the boxes</b> <div class="out overout"> <p>move your mouse</p> <div class="in overout"><p>move your mouse</p><p>0</p></div> <p>0</p> </div> <div class="out enterleave"> <p>move your mouse</p> <div class="in enterleave"><p>move your mouse</p><p>0</p></div> <p>0</p> </div> <script> var i = 0; $( "div.overout" ) .mouseover(function() { $( "p:first", this ).text( "mouse over event occured" ); $( "p:last", this ).text( ++i ); }) .mouseout(function() { $( "p:first", this ).text( "mouse out event occured" ); }); var n = 0; $( "div.enterleave" ) .mouseenter(function() { $( "p:first", this ).text( "mouse enter event occured" ); $( "p:last", this ).text( ++n ); }) .mouseleave(function() { $( "p:first", this ).text( "mouse leave event occured" ); }); </script> <br>