JQuery悬停在层次结构中的最后一个元素上

Question

我有以下html结构

<div>
    text 1
    <div>
        text 2
        <div>
            text 3
            <div>
                text 4
            </div>
        </div>
    </div>
</div>?

使用以下jquery

$('div').hover(
    function() {
        $(this).addClass("hover");
    },
    function() {
        $(this).removeClass("hover");
    }
);?

的jsfiddle

当我将鼠标悬停在带有文本4的最后一个div时,所有上述div元素都将使类悬停.

是否有一种聪明的方法只将悬停类放在最后一个悬停的div元素上？因此,当我将鼠标悬停在文本3时,只有周围的div才能获得悬停类.

我不想将文本包装在新元素中,因为应用的情况比这复杂一点.我也不能使用CSS3.

Answer 1

在鼠标悬停时,将类添加到当前元素,然后div使用.parents()以下命令从其所有祖先中删除该类:

    function() {
        $(this).addClass("hover").parents('div').removeClass("hover");
    },

对小鼠出来,从当前元素中删除类和类添加到它的父div使用.parent(),如果它的父是一个.这样,当鼠标从当前移动div 到其父级时div,它将收到悬停效果:

    function() {
        $(this).removeClass("hover").parent('div').addClass("hover");
    }

您在使用选择.parents()和.parent()必须是你使用相同的选择$(),这样你就不会影响到错误的元素.

jsFiddle预览