<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>
div.out {
  width: 300px;
  height: 300px;
  margin: 15px;
  border-radius: 20px;
  background-color: #d6edfc;
  float: left;
  text-align: center;
}
div.in {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  background-color: #ffcc00;
  margin: 10px auto;
}
p {
  background: salmon;
  line-height: 2em;
  margin: 0;
  padding: 0;
}
var i = 0;
$("div.overout")
  .mouseover(function () {
    $("p:first", this).text("mouse over");
    $("p:last", this).text(++i);
  })
  .mouseout(function () {
    $("p:first", this).text("mouse out");
  });

var n = 0;
$("div.enterleave")
  .mouseenter(function () {
    $("p:first", this).text("mouse enter");
    $("p:last", this).text(++n);
  })
  .mouseleave(function () {
    $("p:first", this).text("mouse leave");
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js