Jquery将鼠标悬停在包含子元素的元素上

我有以下代码：

<div class"classNameFather">
    <div class="className">
        <div class="className">
             <div.... (unlimited elements)
        </div>
    </div>
</div>

$('.className').hover(function() {
    //do hover stuff
}, function() {
    //do mouseout stuff
});

$('.classNameFather').hover(function() {
    //do hover stuff
}, function() {
    //do mouseout stuff
});

用于阻止事件冒泡

$('.className').hover(function(e) {
    e.stopPropagation();
    //do hover stuff
}, function(e) {
    e.stopPropagation();
    //do mouseout stuff
});

$('.classNameFather').hover(function(e) {
    e.stopPropagation();
    //do hover stuff
}, function(e) {
    e.stopPropagation();
    //do mouseout stuff
});


更新

根据您想要实现的实际效果，您可能需要使用
.mouseover（）
和
.mouseout（）
方法，而不是使用（
.mouseenter（）
和
.mouseleave（）
）的
.hover（）
方法

在这个演示中可以看到不同之处