顯示和隱藏延遲懸停的內容

Question

我需要做一件事。 我在網上有元素。當用戶將鼠標懸停在這個項目上時，我需要例如顯示警報。但延遲：當用戶將鼠標懸停在項目上，並且在一秒鐘的鼠標仍然在項目上時，將顯示警報。我可以做到這一點，但我想在鼠標離開相同的項目時做同樣的事情（當鼠標離開項目，一秒鐘後仍然是項目外）。現在我用這個代碼，但它當然這麼想的同意離開

$('.test').hover(function(){ 
    mytimeout = setTimeout(function(){ 
    alert("enter"); 
    }, 1000); 
}, function(){ 
    clearTimeout(mytimeout); 
}); 


$('.test').mouseleave(function() { 
    alert("escape"); 
}); 

當然我不會與警報使用此工作;） 我不知道該怎麼做。懸停在懸停？還是用別的東西？ 謝謝你的幫助和對我的英語感到抱歉。

Answer 1

您將需要超時在兩個區塊，進入/離開，如下面：

var $demo = $("#demo"); 
 
var timer; 
 

 
$('.test').hover(function() { 
 
    //Clear timeout just in case you hover-in again within the time specified in hover-out 
 
    clearTimeout(timer); 
 
    timer = setTimeout(function() { 
 
     $demo.text("enter"); 
 
    }, 1000); 
 
}, function() { 
 
    //Clear the timeout set in hover-in 
 
    clearTimeout(timer); 
 
    timer = setTimeout(function() { 
 
     $demo.text("exit"); 
 
    }, 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="test">Hover me!</button> 
 

 
<div id="demo"></div>

Answer 2

你幾乎已經擁有它了。 jquery hover函數接受兩個參數onHoverStart（或onMouseOver）處理程序和onHoverStop（或onMouseLeave）處理程序。您只需要將警報添加到onHoverStop處理程序。

$('#test').hover(function(){ 
    setTimeout(function(){ 
    alert("enter"); 
    }, 1000); 
}, function(){ 
    setTimeout(function(){ 
    alert("escape"); 
    }, 1000); 
}); 

Answer 3

Working fiddle。

您可以按照mouseleave同樣的想法，如果你願意，你只需要清除計時器timer_mouseleave上hover事件：

var timer_mouseleave; 

$('.test').hover(function(){ 
     clearTimeout(timer_mouseleave); 

     mytimeout = setTimeout(function(){ 
     alert("enter"); 
     }, 2000); 
}, function(){ 
    clearTimeout(mytimeout); 
}); 

$('.test').mouseleave(function() { 
     timer_mouseleave = setTimeout(function(){ 
     alert("escape"); 
     }, 2000); 
}); 

希望這有助於。

Answer 4

試試這個。只需要重置每個懸停事件的超時時間。

(function(){ 
     var mytimeout = null; 
     $('.test').hover(function(){ 
      clearTimeout(mytimeout); 
      mytimeout = setTimeout(function(){ 
       alert("enter"); 
      },1000); 
     }); 
    })();