javascript - 如何在 jQuery 中控制我的悬停事件？

Question

我试图在“.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); 
        });

});

Answer 1

jQuery 的 hover 方法适应鼠标进入 和 离开事件，所以你真的不需要做一个显式的 mouseleave 事件处理程序.

hover像这样工作:

$( ... ).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);
});