如何将鼠标悬停在导航链接上时防止持续闪烁？

Question

我创建了一个导航，如果您将鼠标悬停在链接上，则会看到较低的导航导航，如果您单击下方导航菜单保持活动等的链接等。问题是当我将鼠标悬停在顶级链接上时，悬停事件会获得不断发射引起严重的闪烁。任何人都可以建议我可能出错或者可以解决这个问题吗？

jsbin链接http://jsbin.com/ijofis/15

Answer 1

将hover更改为mouseenter，这样您的功能才会在您输入链接时执行。

Answer 2

您可以使用css进行隐藏/取消隐藏：

li:hover ul {display:block !important;}​

您的代码将被简化。

/*
Task: The messed up GOMO navigation
*/

$(document).ready(function () {

  var lowerNav = $('.lower', '#main-nav').hide();

  $('#main-nav > li > a').on('click' , function(e){   
    if(!$(this).parent().hasClass('flag')){
      $('#main-nav > li').removeClass('flag');
      $('.lower').hide();
      $(this).parent().addClass('flag');
      $(this).next().show();
    }
    e.preventDefault();
  });

});​

以下是一个示例：http://jsfiddle.net/nTwKH/

---

或者，这行CSS似乎可以修复您当前的代码：

a {text-decoration:none;color:#343434;  z-index:1; position: relative;}