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

我有以下html结构

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

当我使用文本4悬停到最后一个div时，上面所有的div元素都将获得类hover

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

我不想用新元素来包装文本，因为应用的情况比这个复杂一点。我也不能使用CSS3。

你可以这样做

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

---

鼠标悬停，将该类添加到当前元素，然后使用以下命令从其所有祖先

div

s中删除该类：

鼠标悬停时，从当前元素中删除该类，并使用将该类添加到其父级

div

，如果其父级是一个。这样，当鼠标从当前

div

移动到其父

div

时，它将收到悬停效果：

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

在

.parents（）

和

.parents（）

中使用的选择器必须与在

$（）

中使用的选择器相同，以便不会影响错误的元素

---

我也在考虑这个问题，但一旦你将鼠标悬停在“文本4”到“文本3”之间，我希望“文本3”周围的div中有一个悬停类，这就是我要找的。谢谢你能给最里面的div一个类名吗？你也要选择父类吗？或者仅仅是悬停的实际元素？我真的很想用stopPropagation（）实现这一点，但似乎无法让它正常工作。@idrumgood:这里也一样：（不，层次结构是动态的，并且随着ajax的使用而变化

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

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