<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: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #D6EDFC;
    float: left;
}

div.in {
    width: 60%;
    height: 60%;
    background-color: #FFCC00;
    margin: 10px auto;
}

p {
    line-height: 1em;
    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");
});