javascript – jQuery CSS Hover

我有一个CSS菜单,用于设置悬停在它上面的父li的颜色和它的子ul(子菜单).基本上,当您将鼠标悬停在菜单上时,它会改变颜色并保持这种状态,直到您将菜单及其子菜单鼠标移开为止.看起来很好.

我添加了一些jQuery代码来改变菜单项的颜色,直到打开某个页面.然后,这些菜单将淡入并重新获得颜色.此时,等待悬停改变颜色.

我遇到的问题是,当您使用jQuery将颜色更改回原始状态(在CSS中设置)时,它会移除：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++;
               });
            });
         }
      }
   });
});

解决方法:

您应该能够使用：hover选择器并传入分别设置和取消设置悬停颜色的over()和out()函数.有关更多信息,请参阅:hover documentation.

简单的例子

鉴于CSS：

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

做这样的事情：

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