jQuery CSS Hover

У меня есть меню CSS, которое устанавливает родителя li 'цвет при наведении на него иs child ul (подменю). По сути, когда вы наводите курсор мыши на меню, оно меняет цвет и остается таким до тех пор, пока вы не наведите курсор мыши на меню и не увидитес подменю. Это выглядит красиво.

Мы добавили некоторый код jQuery, чтобы изменить цвет пунктов меню, пока не будет открыта определенная страница. Затем эти меню исчезнут и вернут цвет. В этот момент ждем, когда наведите курсор на изменение цвета.

Проблема яу меня есть, когда вы меняете цвет обратно на негоИсходное состояние (установленное в CSS) с помощью jQuery удаляет класс: hover, предотвращая изменение цвета при наведении на него, и он 'дочернее подменю. Любые идеи о том, как это исправить? Есть ли селектор с jQuery, который 'Позвольте мне вернуть класс: hover в нормальное состояние?

/* ---- 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++;
               });
            });
         }
      }
   });
});

Ответы на вопрос(2)

Ваш ответ на вопрос