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