jQuery mouseenter Method Live Example

You can edit / change the code and click run button

<!doctype html>
<html lang="en">
<head>
<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></head>
<body>
 <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>
</body>
</html>