<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");
});
External CSS
This Pen doesn't use any external CSS resources.