jQuery CSS悬停效果

Question

我有一个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++;
               });
            });
         }
      }
   });
});

- Anon

---

你已经使用了 $('ul.menu-horiz').children('li').children('a') 三次。建议将其保存到一个变量中以提高效率。 - Justin Johnson

Answer 1

你应该能够使用 :hover 选择器，并传入一个 over() 和 out() 函数来分别设置和取消悬停颜色。请参阅 :hover 文档获取更多信息。 简单示例 假设有以下 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');
   })

- beggs

Answer 2

我在应用悬停在其父级

上时的颜色更改时遇到了问题（正如您在上面发布的代码中所看到的）。

直到现在我才意识到它需要更改为

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

请忽略我 >_>

- Anon