增加鼠标移出功能的延迟

Question

我有一个下拉菜单，

<ul>
<li><a>link 1</a>
<ul><li><a>link 1</a></li></ul>
</li>
</ul>

我正在使用以下JS来使用悬停和显示子菜单。

我想在500毫秒左右的时间内将鼠标移出功能（当删除LI类时）添加延迟，

 $('li').hover(function(){
    $(this).addClass('over');
    }, function(){
    $(this).removeClass('over');
  });

请做这个有需要的。

提前致谢

Answer 1

您可以执行以下操作：

$('li').hover(function(){
  var timer = $(this).data('timer');
  if(timer) clearTimeout(timer);
  $(this).addClass('over');
}, function(){
  var li = $(this);
  li.data('timer', setTimeout(function(){ li.removeClass('over'); }, 500));
});

这会清除将鼠标悬停在上面的任何超时（以防您将鼠标悬停，离开，向后悬停，您需要检查此项），并在离开悬停时设置500ms的延迟，使用.data()将超时ID存储在li自身上。

Answer 2

$('li').hover(function(){
    $(this).addClass('over');
    }, function(){
    setTimeout(function(){$(this).removeClass('over')}, 500);
  });