title: Make hover highlight entire li row in FancyTree
body: <p>I'm using FancyTree and wish to highlight the entire row when an li item is hovered over. At the moment, it only highlights the li itself, and the highlight thus doesn't extend all the way to the left hand side margin (of the parent ul).</p>
  
  <p>You can see a fiddle here: <a href="http://jsfiddle.net/KcxRd/684/" rel="nofollow">http://jsfiddle.net/KcxRd/684/</a></p>
  
  <p>Is this possible in CSS? Or would some JavaScript be necessary? Bear in mind I can't manually set the li indentation as they're infinitely nested. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="ui-fancytree fancytree-container fancytree-plain" tabindex="0"&gt;
     &lt;li class=""&gt;&lt;span class="fancytree-node fancytree-exp-n fancytree-ico-c"&gt;&lt;span class="fancytree-expander"&gt;&lt;/span&gt;&lt;span class="fancytree-checkbox"&gt;&lt;/span&gt;&lt;span class="fancytree-icon"&gt;&lt;/span&gt;&lt;span class="fancytree-title"&gt;Node 1&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;
     &lt;li class=""&gt;&lt;span class="fancytree-node fancytree-selected fancytree-exp-n fancytree-ico-c"&gt;&lt;span class="fancytree-expander"&gt;&lt;/span&gt;&lt;span class="fancytree-checkbox"&gt;&lt;/span&gt;&lt;span class="fancytree-icon"&gt;&lt;/span&gt;&lt;span class="fancytree-title"&gt;Node 2&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;
     &lt;li class=""&gt;
        &lt;span class="fancytree-node fancytree-expanded fancytree-folder fancytree-has-children fancytree-exp-e fancytree-ico-ef"&gt;&lt;span class="fancytree-expander"&gt;&lt;/span&gt;&lt;span class="fancytree-checkbox"&gt;&lt;/span&gt;&lt;span class="fancytree-icon"&gt;&lt;/span&gt;&lt;span class="fancytree-title"&gt;Folder 3&lt;/span&gt;&lt;/span&gt;
        &lt;ul style=""&gt;
           &lt;li class=""&gt;&lt;span class="fancytree-node fancytree-exp-n fancytree-ico-c"&gt;&lt;span class="fancytree-expander"&gt;&lt;/span&gt;&lt;span class="fancytree-checkbox"&gt;&lt;/span&gt;&lt;span class="fancytree-icon"&gt;&lt;/span&gt;&lt;span class="fancytree-title"&gt;Node 3.1&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;
           &lt;li class="fancytree-lastsib"&gt;&lt;span class="fancytree-node fancytree-lastsib fancytree-exp-nl fancytree-ico-c"&gt;&lt;span class="fancytree-expander"&gt;&lt;/span&gt;&lt;span class="fancytree-checkbox"&gt;&lt;/span&gt;&lt;span class="fancytree-icon"&gt;&lt;/span&gt;&lt;span class="fancytree-title"&gt;Node 3.2&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;
        &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>span.fancytree-node:hover {
          background: #f2f6f9 !important;
         color: #5b9bd1 !important;
         cursor:pointer;
  }
  
  span.fancytree-node:hover &gt; span.fancytree-title{
         color: #5b9bd1 !important;
  }
  </code></pre>
  
  <p>Many thanks</p>