Question

我试图在＆＃39; .menu＆＃39;时显示叠加div。徘徊。我已经使用悬停来显示div（首先用CSS隐藏），mouseleave重置它。我怎么能这样做，所以鼠标需要在菜单上显示几秒钟才能显示，所以如果它只是快速滚动它就什么都不做。我知道我可以用延迟（）做到这一点，但是如果我快速翻看按钮5次，屏幕会闪烁5次。我怎样才能做到只做一次然后终止。

感谢。

 $( document ).ready(function() {

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

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

});

Answer 1

You can use '$(document).ready(function () { $('.outer').on('click', function () { console.log('outer'); }); $('.inner').on('click', function (e) { e.stopPropagation(); console.log('inner'); }); }); and setTimeout, check example bellow.

I can do this with delay() but if i go over the button quickly 5 times, the screen flashes 5 times with the overlay

Using the clearTimeout function in clearTimeout() in example bellow will resolve this problem.

Hope this helps.

hoverOut()

$( document ).ready(function() {
    var menu_hover_timer;
    $(".page-overlay").hide();

    $( ".menu" ).hover(
        function() {
            menu_hover_timer = setTimeout(function(){
                $(".page-overlay").fadeIn(200);
            },1000); //wait 1 seconds
        }, function() {
            clearTimeout(menu_hover_timer)
        }
    );
});

Answer 2

jQuery's <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <table> <tbody> <tr> <td> <input type="checkbox" /> </td> </tr> <tr> <td> <input type="checkbox" checked /> </td> </tr> <tr> <td> <input type="checkbox" checked /> </td> </tr> </tbody> method accommodates for the mouse entering and leaving events, so you don't really need to make an explicit hover event handler.

hover works like this:

mouseleave

So you can adjust your code to something like this:

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

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

2 个答案: