Question

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

请参阅上面的网址，并将鼠标悬停在右上角的向下箭头或搜索图标上。当我使用类cp-dropdown将鼠标悬停在此li上时，我想切换类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，我能够很容易地解决这个问题，我已经调整了他的代码来彻底解决这个问题;我基本上需要在我的下拉菜单中应用与子div相同的z-index。请参阅下面的添加内容：

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

希望这会有所帮助，请查看问题中的网址以获取有效示例：）

toggleClass在鼠标移动时闪烁

2 个答案: