添加样式树（“礼”）

Question

的节点，我有以下树形http://jsfiddle.net/anirbankundu/wzEBW/

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

任何帮助吗？

Answer 1

我只是缠“格”的“a”元素：

<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 2

可以“撤销”子节点上的高亮：

li:hover { 
    background: red; 
} 

li:hover li { 
    background: white; 
} 

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找到它。