jQuery CSS Hover

Question

I have a CSS menu that sets the parent li's color when hovering over it and it's child ul (submenu). Basically, when you hover over the menu, it changes colour and remains that way until you mouseoff the menu and it's submenu. It looks nice.

I've added some jQuery code to change the colour of the menu items when until a certain page is opened. Then, those menus will fade back in and regain colour. At which point, waiting for a hover to change colour.

The problem I'm having is, when you change the colour back to it's original state (set in CSS) with jQuery, it removes the :hover class preventing the colour change when hovering over it and it's child submenu. Any ideas on how to fix this? Is there a selector with jQuery that'll 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++;
               });
            });
         }
      }
   });
});

Solution

You should be able to use the :hover selector and pass in an over() and out() function that set and unset the hover color respectively. See the :hover documentation for more.

Simple Example

given the 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');
   })