仅当达到特定时间时才保留悬停状态

Question

在下面的代码块中，我正在尝试找到一种方法仅在特定时间后离开悬停状态(例如 500 毫秒(

<div id='a' style="border:2px solid black" >
<h3>Hover</h3></br>
</div>
<div id="test" style="background-color:red">
display
</div>

$(document).ready(function() {
$("#test").hide();
var delay = 200, setTimeoutConst;
$('#a').hover(function() {
setTimeoutConst = setTimeout(function() {
$("#test").show();
}, delay);
}, function() {
// execute here ONLY if 500ms have passed outside of the control being hovered
})
})

谢谢你的帮助

Answer 1

$(document).ready(function() {
$("#test").hide();
var delay = 200, setTimeoutConst;
$('#a').hover(function() {
//clear the timeout incase it was going to hide it
clearTimeout(setTimeoutConst);
setTimeoutConst = setTimeout(function() {
$("#test").show();
}, delay);
}, function() {
//clear the timeout incase it was going to show it again
clearTimeout(setTimeoutConst);
setTimeoutConst = setTimeout(function() {
$("#test").hide();
}, 500);
})
})

Answer 2

setTimeout

$(document).ready(function(){
$("#test").hide();
var delay=200, setTimeoutConst, myTime;

$('#a').hover(function(){
setTimeoutConst = setTimeout(function(){
$("#test").show();
//Here is the missign part. clearTimeout so the callback won't be executed. 
clearTimeout(myTime); 
}, delay);
},function(){

myTime=  setTimeout(function(){

$("#test").hide( ); 
}, 500);
//execute here ONLY if 500ms has passed outside of the control being hovered
})



})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='a' style="border:2px solid black" >
<h3>Hover</h3>
</br>
</div>
<div id="test" style="background-color:red">
display
</div>