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");
});

这将实现脚本的跨浏览器兼容性。请参阅更新后的脚本here。由于您的示例脚本不包含任何子列表，因此它现在不起作用。但是如果你想看一个可用于演示的工作版本，那么可以从hear找到它。

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

4 个答案: