Machen Sie den Mauszeiger über die gesamte li-Zeile in FancyTree

Question

Ich benutze FancyTree und möchte die gesamte Zeile hervorheben, wenn ein li-Objekt sich über ihm befindet. Im Moment hebt es nur das li selbst hervor, und das Highlight erstreckt sich somit nicht bis zum linken Seitenrand (der Eltern-ul).

Sie eine Geige hier sehen können: http://jsfiddle.net/KcxRd/684/

Ist das möglich in CSS? Oder wäre etwas JavaScript notwendig? Bedenken Sie, dass ich den Li-Einzug nicht manuell einstellen kann, da sie unendlich verschachtelt sind.

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

Vielen Dank

Answer 1

So ist die fancytree 'breit' Erweiterung dies ist genau das: https://github.com/mar10/fancytree/wiki/ExtWide

Answer 2

versuchen, diese Zahl

in Ihrer ui.fancytree.css Linie tun 547

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

Answer 3

Verwendung

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

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

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