1

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).

You can see a fiddle here: http://jsfiddle.net/KcxRd/684/

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.

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

Many thanks

Jingo
  • 768
  • 1
  • 10
  • 23

3 Answers3

1

try doing this

in your ui.fancytree.css line number 547

.fancytree-plain span.fancytree-node:hover span.fancytree-title{
  background-color: #eff9fe;
  border-color: #70c0e7;
  width: inherit;
}
Shansana Waruna
  • 379
  • 1
  • 3
  • 12
1

So the fancytree 'wide' extension does exactly this: https://github.com/mar10/fancytree/wiki/ExtWide

Jingo
  • 768
  • 1
  • 10
  • 23
-1

use

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

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

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

mmushtaq
  • 3,430
  • 7
  • 30
  • 47