Question

当相关菜单可见时，我试图让菜单和铃铛图标变成红色，所以我做了一个悬停功能和一个css功能，但似乎是悬停覆盖了css规则。

这是代码：

// JavaScript Document
var toggleclicks = 0;
var menuclicks = 0;

$(document).ready(function() {
        $('.icon-bell').hover(
         function() {
             $('.icon-bell').css({'color': 'red'});
         },
         function() {
            $('.icon-bell').css({'color': '#ABABAB'}); 
         }
         );
         $('.icon-menu').hover(
         function() {
             $('.icon-menu').css({'color': 'red'});
         },
         function() {
            $('.icon-menu').css({'color': '#ABABAB'}); 
         }
         );
//WRAPPER//
    $('.toggle').click(function() {
      ++toggleclicks;
      if (toggleclicks%2 === 0) {
         // even clicks
         $('.wrapper').css({'margin-top': '-260px'});
         $('.icon-menu, .icon-bell').css({'color': '#ABABAB'});
      } else {
         // odd clicks
         $('.wrapper').css({'margin-top': '0'});
         $('.icon-bell').css({'color': 'red'});
         $('.contact, .diet, .hours, .classes, .gym').css({'margin-bottom': '-300px'});
         $('.main-nav').css({'width': '0'});
         $('.icon-menu').css({'color': '#ABABAB'});
         menuclicks = 0;
      }
    });

//NAV BAR//
    $('.toggle-menu').click(function() {
      ++menuclicks;  
      if (menuclicks%2 === 0) {
         // even clicks
         $('.main-nav').css({'width': '0'});
         $('.icon-menu, .icon-bell').css({'color': '#ABABAB'});
      } else {
         // odd clicks
         $('.main-nav').css({'width': '50%'});
         $('.icon-bell').css({'color': '#ABABAB'});
         $('.wrapper').css({'margin-top': '-260px'});
         $('.contact, .diet, .hours, .classes, .gym').css({'margin-bottom': '-300px'});
         toggleclicks = 0;
      }
    });

正如您所看到的，它假设在单击奇数并且菜单打开（使用css规则）时将图标颜色更改为红色，但它不会发生（颜色变化）。您可以在此处查看实时示例：http://boazkerengil.com

提前感谢您的任何帮助：）

Answer 1

您可以在菜单图标打开时向菜单图标添加一个类，并为此类指定红色。有点像这样：

.menu-opened {
    color: red;
}

打开时，将上面的类添加到菜单图标中。您可以通过jQuery API addClass执行此操作，并在菜单关闭时删除此类

编辑：

$('.toggle').click(function() {
      ++toggleclicks;
      if (toggleclicks%2 === 0) {
         // even clicks
         // Other stuff...
         $('.icon-menu, .icon-bell').addClass('menu-opened');
      } else {
         // odd clicks
         // Other stuff...
         $('.icon-menu').removeClass('menu-opened');
         menuclicks = 0;
      }
    });

并添加此CSS

.icon-menu:hover, .icon-menu.menu-opened {
    color: red;
}

删除所有悬停相关的JavaScript函数

使用jQuery悬停和颜色

1 个答案: