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

【问题标题】：Make hover highlight entire li row in FancyTree使悬停突出显示 FancyTree 中的整个 li 行
【发布时间】：2016-07-19 18:31:38
【问题描述】：

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

你可以在这里看到一个小提琴：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;
}

非常感谢

【问题讨论】：

标签： jquery css hover fancytree

【解决方案1】：

尝试这样做

在你的 ui.fancytree.css 行号 547

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

【讨论】：

【解决方案2】：

因此，fancytree 'wide' 扩展正是这样做的：https://github.com/mar10/fancytree/wiki/ExtWide

【讨论】：

【解决方案3】：

使用

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

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

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

【讨论】：

这不会突出显示整个 li 元素行？