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

时间:2012-03-01 17:31:29

标签: javascript jquery

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

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

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

您可以使用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;}