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').hover(
    function() {
        $('div').removeClass("hover");
        $(this).addClass("hover");
    },
    function() {
        $(this).removeClass("hover");
    }
);​

Answer 2

鼠标悬停时，将类添加到当前元素，然后使用.parents()从其所有祖先divs 中删除该类：

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

鼠标移出时，从当前元素中删除类，并使用 .parent() 将类添加到其父级 div，如果其父级为 1。这样，当鼠标从当前div移动到其父div时，它会收到悬停效果：

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

您在.parents() 和.parent() 中使用的选择器必须与您在$() 中使用的选择器相同，以免影响错误的元素。

jsFiddle preview