Jquery 将样式添加到树的节点（“li”）

我有下面的树-

此树可以有n个节点。当用户将鼠标悬停在单个节点上时，需要更改节点背景颜色。基本上，需要向li中添加一个hover类。在任何一点上，只能突出显示一个节点。我应用它的样式基本上是添加li的后续子节点。（参见小提琴链接）

有什么帮助吗

您可以“撤消”子节点上的高亮显示：

li:hover {
   background: red;
}

li:hover li {
   background: white;
}

我刚刚将“a”元素包装在“div”周围：

它似乎起作用了

---

希望有帮助

看起来你已经成功了，但是如果你以后再添加级别，这会更简单一些，并且可能会导致更少的随机性：

李宇莉：悬停{
背景色：#C0DDF0；
}

在CSS使用中

ul li ul li.hover {
    background-color: #C0DDF0;
}

而不是

ul li ul li:hover {
    background-color: #C0DDF0;
}

用JavaScript（jQuery）编写：

这将实现脚本的跨浏览器兼容性。请查看更新的脚本。因为您的示例脚本不包含任何子列表，所以它现在无法工作。但是，如果您希望看到一个用于演示的工作版本，请从中找到它

ul li ul li.hover {
    background-color: #C0DDF0;
}

ul li ul li:hover {
    background-color: #C0DDF0;
}

$("ul li ul li","#pnlDestinations").live("mouseenter", function() {
    $(this).addClass("hover").siblings("li").removeClass("hover");
}).live("mouseleave", function() {
    $(this).removeClass("hover");
});