Jquery 将鼠标悬停在带有子元素的元素上

Question

我有这个代码:

<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
});

所以我想做的是，当我将鼠标悬停在最后一个元素或第二个或第三个元素时......所有 parent 都没有悬停......

只有第一个元素有不同的类名，并且子元素没有限制......

谢谢

Answer 1

使用event.stopPropagation()阻止事件冒泡..

$('.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() 方法而不是 .hover () 使用 (.mouseenter() 和 .mouseleave())。

在此演示中可以看到差异 http://jsfiddle.net/gaby/Zse5V/