Geek Answers Handbook

JQuery CSS Hover

I have a CSS menu that sets the color of the parent li when hovering over it, and this is the child ul (submenu). Basically, when you hover over a menu, it changes color and stays that way until you click on the menu and its submenu. It looks good.

I added jQuery code to change the color of menu items until a specific page opens. Then these menus will disappear and return to color. At this point, waiting to hover over a color change.

The problem I'm having is that when you change the color back to its original state (set in CSS) using jQuery, it removes the: hover class, which prevents the color from changing when it hangs over it and the child submenu. Any ideas how to fix this? Is there a selector with jQuery that will allow me to set the: hover class back to normal?

/* ---- Menu Colours ---- */ $(document).ready(function() { var colours = ['d50091', 'c8fa00', '00b4ff', 'b158fc', 'ffa800', '00b72f']; var counter = 0; // Loop for the colurs var status = 0; // Status of the colours (greyed out or visible) $('ul.menu-horiz').children('li').children('a').hover(function() { $(this).parent()[0].css('color', '#d50091'); }, function() { $(this).parent()[0].css('color', '#b6b6b6'); }); $('ul.menu-horiz').children('li').children('a').each(function() { $(this).css({opacity: 0.2, color: '#' + colours[counter]}); counter++; }); $('.haccordion .header').click(function() { if (window.location.hash.substr(1) == 'photogallery') { $('ul.menu-horiz').children('li').children('a').each(function() { if ($(this).css('opacity') != '1.1') { $(this).animate({opacity: 1.1}, 1000).css('color', '#b6b6b6'); } }); } else { counter = 0; if ($('ul.menu-horiz').children('li').children('a').css('opacity') != '0.2') { $('ul.menu-horiz').children('li').children('a').animate({opacity: 0.2}, 1000, function() { $('ul.menu-horiz').children('li').children('a').each(function() { $(this).css('color', '#' + colours[counter]); counter++; }); }); } } }); });
+4
source share
2 answers

You can use the :hover selector and pass the over() and out() function, which sets and cancels the hover color, respectively. See :hover details.

Simple example

considering CSS:

 <style> .blue { background-color: blue; } .red { background-color: red; } </style>

do something like this:

 $('li').hover(function() { $(this).removeClass('red'); $(this).addClass('blue'); }, function() { $(this).removeClass('blue'); $(this).addClass('red'); })
+6
source

I am having trouble changing color when it hangs over it parent

(as you can see in the above code).

Took me so far to understand that it needs to be changed to

 $('ul.menu-horiz').children('li').hover(function() { $(this).children('a').css('color', '#d50091'); }, function() { $(this).children('a').css('color', '#b6b6b6'); });

Ignore me> _>

0
source

More articles:


All Articles