jquery - toggleClass 在鼠标移动时闪烁

Question

http://esp-platform.ice.im/

查看上面的 URL 并将鼠标悬停在右上角的向下箭头或搜索图标上。当用类将鼠标悬停在这个 li 上时，cp-dropdown我想切换类showme但是由于某种原因，当你移动鼠标时，类似乎闪烁？有没有人有任何想法？

使用的jQuery：

function navShow() {
  $('.cp-dropdown').mouseenter(function() {
    $('.site_tint').toggleClass('showme');
  });
}

谢谢

Answer 1

该mouseenter事件一遍又一遍地触发，因此不断切换您的课程。实施mouseleave以删除类：

function navShow() {
  $('.cp-dropdown').mouseenter(function() {
    $('.site_tint').addClass('showme');
  }).mouseleave(function(){
    $('.site_tint').removeClass('showme');
  });
}

Answer 2

感谢上面的@james246，我能够很容易地解决这个问题，我已经调整了他的代码来彻底解决这个问题；我基本上需要z-index在我的下拉菜单上应用与子 div 相同的内容。请参阅下面的我的补充：

function navShow() {
  $('.cp-dropdown').mouseenter(function() {
    $('.site_tint').addClass('showme');
    $(this).addClass('current')
  }).mouseleave(function(){
    $('.site_tint').removeClass('showme');
    $(this).removeClass('current')
  });
}

希望这会有所帮助，请参阅问题中的 url 以获取工作示例:)