<div class="container">

​

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

.container {

  margin: 5px auto;

  padding: 15px;

  width: 500px;

  height: 200px;

  border: solid 2px black;

  font-size: 20px;

}

div.out {

  width: 230px;

  height: 180px;

  margin: auto 10px;

  background-color: #d6edfc;

  float: left;

}

div.in {

  width: 60%;

  height: 60%;

  background-color: #ffcc00;

  margin: 10px auto;

}

p {

  line-height: 1.1em;

  margin: 5px;

  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");

  });

​