Question

If you look at Sample 1 on this page, you will see that, when you hover over the folder entries, the text turns red, but not if you hover over the leaf entries. I would like the styling for the leaf entries to work the same way as the folder entries.

Each branch of the tree is an unordered list. The leaf entries are list items <li>. I have tried styling the hover attribute for list items, and have played around with hover styling for other parts of the DOM, but it either doesn’t work at all, or it will style the entire branch of the tree (the text for the folder and all leaf items turns red).

Is there a way to make this work, so that it will change the text color for any individual item in the tree that I hover over, including the leaf nodes?

Answer 1

I’m not sure I have my head wrapped completely around it, but it is clear from looking at the jQuery treeview code that the author is treating folder nodes differently from file nodes.

I solved the problem by wrapping the text of each file node in an <a> tag, which will serve my purpose well because these are all ultimately supposed to be links anyway. This allows me to style them thusly:

.treeview a:link { }
.treeview a:visited { }
.treeview a:hover { }

In a way, this is kinda cool, since it allows me to apply slightly different hover styles to the file nodes and folder nodes if I wish.