jquery - When hovering over parent li make child li color white and vice versa -
first let me describe problem i'm having. please visit http://dev.eduantech.com/about-me know i'm talking about. has page, can't home page can see i'm talking about.
ok please hover on menu, @ least 1 has sub-menu in it. notice when hover on parent li
child li
becomes "invisible", since it's same color background. vice-versa if hover on child element.
what need figure out, i'm sure guessed, whenever mouse on top of either of these makes other 1 white well.
i have following sorta pseudo-code worked out:
$('li.menu-parent-current > li.menu-child-current a').hover( function() { $(this).css('color', '#fdfdfd'); }, function() { if (/* mouse leaves parent */) { // change child color blue } else if (/* mouse did not leave parent */) { // make child color white $(this).css('color', '#fdfdfd'); } });
there's room improvement on this, no doubt, go ahead , give better version if necessary. :)
i've been past couple of hours on can't solve it, i'm sure it's simple, i'm no jquery expert. can provide. :)
edit:
well... turns out on complicating it. being relative newbie doesn't let think correctly. :p
you can css , jquery.
if css:
li:hover a{color:#fff;} li:hover ul li a{color:#fff;}
and if want jquery:
$('ul li').hover( function(){$(this).find('a').css('color','#fff');}, function(){$(this).find('a').css('color','##36c');} );
Comments
Post a Comment