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

Question

我有以下树- http://jsfiddle.net/anirbankundu/wzEBW/

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

有什么帮助吗？

Answer 1

您可以“撤消”子节点上的突出显示：

li:hover {
   background: red;
}

li:hover li {
   background: white;
}

Answer 2

我只是将“a”元素包裹在“div”周围：

<script id="itemTmpl" type="text/html">
    <li>
        <div>
            <a href="#" data-bind="click: $root.toggleChildren, text: showChildren() ? ' - ' : ' + '"></a>
            <a href="#" data-bind="text: name"></a> 
        </div>
        <ul data-bind="visible: showChildren, template: { name: 'itemTmpl', foreach: children }"></ul>
    </li>
 </script>

并对css做一点改动：

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

它似乎工作http://jsfiddle.net/twTcw/

希望能帮助到你！

Answer 3

看起来你让它工作了，但这有点简单，如果你在未来添加关卡，可能会导致更少的随机性：

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

Answer 4

在 CSS 中使用

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

代替

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

在 JavaScript (jQuery) 中写：

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

这将实现脚本的跨浏览器兼容性。请在此处查看更新的脚本。由于您的示例脚本不包含任何子列表，因此它现在不起作用。但是，如果您想查看演示的工作版本，请从hear中找到它。