Question

我正在使用FancyTree，并希望在li项目悬停时突出显示整行。目前，它只突出了li本身，因此突出显示不会一直延伸到左侧边缘（父级ul）。

你可以在这里看到一个小提琴：http://jsfiddle.net/KcxRd/684/

CSS中有可能吗？或者是否需要一些JavaScript？请记住，我无法手动设置缩进，因为它们是无限嵌套的。

HTML：

<ul class="ui-fancytree fancytree-container fancytree-plain" tabindex="0">
   <li class=""><span class="fancytree-node fancytree-exp-n fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-checkbox"></span><span class="fancytree-icon"></span><span class="fancytree-title">Node 1</span></span></li>
   <li class=""><span class="fancytree-node fancytree-selected fancytree-exp-n fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-checkbox"></span><span class="fancytree-icon"></span><span class="fancytree-title">Node 2</span></span></li>
   <li class="">
      <span class="fancytree-node fancytree-expanded fancytree-folder fancytree-has-children fancytree-exp-e fancytree-ico-ef"><span class="fancytree-expander"></span><span class="fancytree-checkbox"></span><span class="fancytree-icon"></span><span class="fancytree-title">Folder 3</span></span>
      <ul style="">
         <li class=""><span class="fancytree-node fancytree-exp-n fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-checkbox"></span><span class="fancytree-icon"></span><span class="fancytree-title">Node 3.1</span></span></li>
         <li class="fancytree-lastsib"><span class="fancytree-node fancytree-lastsib fancytree-exp-nl fancytree-ico-c"><span class="fancytree-expander"></span><span class="fancytree-checkbox"></span><span class="fancytree-icon"></span><span class="fancytree-title">Node 3.2</span></span></li>
      </ul>

CSS：

span.fancytree-node:hover {
        background: #f2f6f9 !important;
       color: #5b9bd1 !important;
       cursor:pointer;
}

span.fancytree-node:hover > span.fancytree-title{
       color: #5b9bd1 !important;
}

非常感谢

Answer 1

尝试这样做

在您的ui.fancytree.css第547行

中

.fancytree-plain span.fancytree-node:hover span.fancytree-title{
  background-color: #eff9fe;
  border-color: #70c0e7;
  width: inherit;
}

Answer 2

使用

 $("span.fancytree-node:").hover( function () {
              $(this).css({"background-color":"#eff9fe"});
           }, 

           function () {
              $(this).css({"background-color":"white"});
           }
 )

http://jsfiddle.net/mmushtaq/KcxRd/707/

Answer 3

所以fancytree'wide'扩展就是这样做的：https://github.com/mar10/fancytree/wiki/ExtWide

悬停在FancyTree

3 个答案: