jQuery CSS 悬停

jQuery CSS Hover(jQuery CSS 悬停)

问题描述

我有一个 CSS 菜单，当将鼠标悬停在父 li 上时，它会设置其颜色，它是子 ul(子菜单).基本上，当您将鼠标悬停在菜单上时，它会改变颜色并保持这种状态，直到您将鼠标悬停在菜单上并且它是子菜单.看起来不错.

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.

我添加了一些 jQuery 代码来更改菜单项的颜色，直到打开某个页面.然后，这些菜单将淡出并恢复颜色.此时，等待悬停改变颜色.

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.

我遇到的问题是，当您使用 jQuery 将颜色更改回其原始状态(在 CSS 中设置)时，它会删除 :hover 类，以防止将鼠标悬停在其上时颜色发生变化，并且它是子子菜单.有想法该怎么解决这个吗?是否有一个带有 jQ​​uery 的选择器可以让我将 :hover 类恢复正常?

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

推荐答案

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

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.

简单示例

给定 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');
   })

这篇关于jQuery CSS 悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！