Proper Use of “mouseenter” and “mouseleave”

by kaikemono

HTML

<div class="outer">
    <div class="inner"></div>
</div>
<br /><br />
<p id="action"><p>

CSS

.outer {
    background: #AAA;
    width: 100px;
    height: 100px;
    padding: 50px;
}

.inner {
    background: #777;
    width: 100px;
    height: 100px;
}

JavaScript

$(document).ready(function() {
    $('.outer').mouseenter(function(e) {
        e.stopPropagation();
        $('#action').append('Entered outer.<br />');
    });
    $('.outer').mouseleave(function(e) {
        e.stopPropagation();
        $('#action').append('Left outer.<br />');
    });
    $('.inner').mouseenter(function(e) {
        e.stopPropagation();
        $('#action').append('Entered inner.<br />');
    });
    $('.inner').mouseleave(function(e) {
        e.stopPropagation();
        $('#action').append('Left inner.<br />');
    });
});