SO - 17589420

by Arun P Johny

HTML

<div id="container">
    <div id="el-1" class="el">
        <div id="ch-1-1" class="child"></div>
    </div>
    <div id="el-2" class="el">
        <div id="ch-2-1" class="child"></div>
    </div>
    <div id="el-3" class="el">
        <div id="ch-3-1" class="child"></div>
    </div>
</div>

CSS

#container {
    padding: 10px;
    margin: 3px;
    border: 1px solid red;
}
#container .el {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid green;
}
#container .child {
    padding: 10px;
    border: 1px solid blue;
}

JavaScript

$('#container .el').on('mouseenter mouseover mouseleave mouseout', function (e) {
    console.log(e.type, this.id, e.target.id)
});

$('#container .el').hover(function (e) {
    console.log('hover1', e.type, this.id, e.target.id)
}, function (e) {
    console.log('hover2', e.type, this.id, e.target.id)
});