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

所以我想要做的就是当我徘徊最后一个元素或第二个或第三个......所有的父母都没有盘旋......

只有第一个元素具有不同的类名,并且对儿童没有限制....

谢谢

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/