jQuery nav-tree menu with li hover highlighting

Permalink
Following on this (http://www.packtpub.com/article/concrete5-mastering-autonav-for-advanced-navigation) excerpt from Remo's excellent looking book, I was inspired to develop the block further.

The idea of the template is to allow a different background color for each level of the menu. This I have accomplished with the code below. I am now having some problems with the hover highlighting. I am attempting to use
$(".nav-tree li").hover(function() {
$(this).addClass("tree-hover");
}, function() {
$(this).removeClass("tree-hover");
});
ul.nav-tree li.tree-hover {background:white;}

which works for the top level but seems to add the class to all the child and parent li rather than just the current hover li.

My question is thus:

what is the leanest most correct way to accomplish this?

I thought about writing a whole selection of css rules for each line but this seems needlessly complicated. FULL CODE BELOW


VIEW.JS
$(document).ready(function() {
// prepend a span element in front of each link
 $(".nav-tree a").parent().prepend("<span class=\"tree-item-type\"></span> ");
//prepend a wider span to each child link and remove original span
 $(".nav-tree ul li span").removeClass("tree-item-type");
 $(".nav-tree ul li span").addClass("tree-item-type2");
 $(".nav-tree ul li ul li span").removeClass("tree-item-type2");
 $(".nav-tree ul li ul li span").addClass("tree-item-type3");
 $(".nav-tree ul li ul li ul li span").removeClass("tree-item-type3");
 $(".nav-tree ul li ul li ul li span").addClass("tree-item-type4");
 // those span element being part of a parent element get a "+"
 $(".nav-tree ul:has(*)").parent().find("> .tree-item-type").text("+").toggleClass("tree-item-folder");
 $(".nav-tree ul:has(*)").parent().find("> .tree-item-type2").text("+").toggleClass("tree-item-folder");
 $(".nav-tree ul:has(*)").parent().find("> .tree-item-type3").text("+").toggleClass("tree-item-folder");
 // hide all submenus

VIEW.CSS
ul.nav-tree{background:pink; overflow:show; margin:0; padding:10px 0 10px 0; width:100%}
ul.nav-tree li {display:block;  width:100%; margin:0; padding:0;}
ul.nav-tree li a {margin-left:0px;}
ul.nav-tree li ul {display:block; width:100%; margin:0; padding:0;}
ul.nav-tree li ul li {background:blue; display:block;  width:100%; margin:0; padding:0;}
ul.nav-tree li ul li a {}
ul.nav-tree li ul li ul {}
ul.nav-tree li ul li ul li {background:red; display:block;  width:100%; margin:0; padding:0;}
ul.nav-tree li ul li ul li a {}
ul.nav-tree li ul li ul li ul {}
ul.nav-tree li ul li ul li ul li {display:block;  width:100%; margin:0; padding:0;}
ul.nav-tree li ul li ul li  ul li a {}
.nav-tree li { list-style-type: none; }
.nav-tree li a {color:black;}
.nav-tree { margin: 0px; padding: 0px; }

View Replies:
JohntheFish replied on at Permalink Reply
JohntheFish
You can make the selector apply to the immediate descendant - assuming the li is immediately below the .nav-tree element:
$('.nav-tree>li').hover(.....


- or if the ul is a descendant of .nav-tree:
$('.nav-tree ul>li').hover(.....


Though you can usually do such class related hovers in pure css rather than using jQuery.
AndYMacKay replied on at Permalink Reply
Thanks for your reply. Although I'm not sure it does what I need out the tin, it has inspired some thinking :)

At present the class is being applied to the top level li which has been stretched to accommodate the descendent ul so that

Top Level ul li
-child ul li ul li ||hovering here
-grandchild ul li ul li ul li

is still hovering within the realm of the Top Level item and therefor changing the background color of the whole block.

What I think needs done is to somehow add a background:transparent class to the children when the top level is hovered, to parent and child when the middle is hovered and to all ancestors when the bottom is hovered.

actually scrap that (the transparent bits will just let the top level li background through) I think I'm going to have to go back to the drawing board and do something with the anchor elements instead..

Well, I'm a little clearer so thanks for your time..
JohntheFish replied on at Permalink Reply
JohntheFish
Another thought, did you start with the new cleaner template that is now in 5.6 - already been in use since 5.4.1.1 - see
http://www.concrete5.org/community/forums/customizing_c5/new-cleane...