使悬停突出显示 FancyTree 中的整个 li 行

Question

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

你可以在这里看到 fiddle：http://jsfiddle.net/KcxRd/684/

这在 CSS 中可行吗？或者有必要 JavaScript 吗？请记住，我无法手动设置 li 缩进，因为它们是无限嵌套的。

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 中的整个 li 行

Make hover highlight entire li row in FancyTree

css

jquery

hover

fancytree