CODEWITHSUNDEEP
javascriptjqueryjquery-selectorshoverdrop-down-menu
Sbml
Sbml

Reputation: 1927

Jquery / Javascript Submenu Color Hover

I have another problem in a jquery dropdown menu.

In my example (link in the bottom) I want that when I hover the 3ºlevel Submenu the text color of the current submenu item stays in hover state (color yellow in example).

Link To Live Example with complete Code

I have comments in the code to explain where is the problem.

Thanks

Upvotes: 0

Views: 490

Answers (2)

mVChr
mVChr

Reputation: 50177

I updated your fiddle here to fix the problem.

I shifted the hover from ul.submenu li a to just be ul.submenu li so that when its submenu2 was hovered over it didn't call the unhover function. I then applied the styles in the functions to the .children('a') tags, like so:

$('ul.submenu li').hover(function() {
    $(this).children('a').css({
        color: '#eff803'
    });

    $(this).find(".submenu li:first a").stop().animate({
        backgroundColor: '#0d0167'
    });
}, function() {
    $(this).children('a').css({
        color: '#ffffff'
    });

    $(this).find(".submenu li:first a").stop().animate({
        backgroundColor: '#0000FF'
    });
});

Upvotes: 1

Walf
Walf

Reputation: 9278

for a start, avoid css() where you can. you're better off using addClass() and removeClass(). define a hover class that contains the colours you want then (assuming your menu is not inside another <ol> or <ul>) use something like

$('.menu a').hover(function() {
  var $path = $(this).parents('li').find('> a').not(this);
  $(this).closest('.menu').find('a').not($path).removeClass('hover');
  $path.addClass('hover');
  //code that animates to the colours in your hover class
  $(this).addClass('hover').css('');//make it stick
});

edit: sorry didn't think about the fading in of styles

Upvotes: 0

Related Questions