Javascript 如何在jQuery中控制悬停事件？

当“.menu”悬停在上方时，我试图显示覆盖div。我用hover来显示div（首先用CSS隐藏），用mouseleave来重置它。我该怎么做呢？鼠标需要在菜单上停留几秒钟才能显示出来，所以如果它只是快速滚动，它什么也不做。我知道我可以用delay（）来实现这一点，但如果我快速浏览按钮5次，屏幕会随着覆盖层闪烁5次。我怎样才能让它只做一次，然后终止

谢谢

 $( document ).ready(function() {

        $(".menu").hover(function() {
            $(".page-overlay").delay(600).fadeIn(200);
        });

        $(".menu").mouseleave(function() { 
            $(".page-overlay").fadeOut(200); 
        });

});

---

您可以使用

setTimeout

和

cleartimout

，检查下面的示例

我可以用delay（）来实现这一点，但如果我快速浏览按钮5次，屏幕会随着覆盖层闪烁5次

在下面的示例中，使用

hoverOut（）

中的

clearTimeout（）

函数可以解决此问题

希望这有帮助

---

$（文档）.ready（函数（）{
变量菜单\悬停\定时器；
$（“.page overlay”）.hide（）；
$（“.menu”）。悬停(
函数（）{
菜单\悬停\计时器=设置超时（函数（）{
$（“.page overlay”）.fadeIn（200）；
}，1000）；//等待1秒钟
}，函数（）{
clearTimeout（菜单\悬停\计时器）
}
);
});

菜单（在此处停留悬停1秒）
页面覆盖分区
jQuery的
hover
方法适用于鼠标进入和离开事件，因此您实际上不需要创建显式的
mouseleave
事件处理程序

工作原理如下：

$( ... ).hover(function(){
    // Here is the mouse entering function
},
function(){
    // Here is the mouse exiting function
});

$(".menu").hover(function() {
    $(".page-overlay").delay(600).fadeIn(200);
},
function(){
    $(".page-overlay").fadeOut(200);
});

因此，您可以将代码调整为以下内容：

$( ... ).hover(function(){
    // Here is the mouse entering function
},
function(){
    // Here is the mouse exiting function
});

$(".menu").hover(function() {
    $(".page-overlay").delay(600).fadeIn(200);
},
function(){
    $(".page-overlay").fadeOut(200);
});

可能的重复我投票决定结束这场比赛，因为我认为这个建议很好；虽然使用
setTimeout
/
clearTimeout
可以解决这个问题，但很难做到正确，而且人们似乎对hoverIntent插件很满意。@LinusGustavLarssonThiel对问题的所有回答都不应该缺少第三方软件的建议吗？