Question

首先是我的HTML代码：

<div class="outter">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="inner"></div>

当我的鼠标悬停在“项目”上时，“内部”显示，当鼠标移出“内部”时显示：

$(".item").hover(function(){
   // setTimeout(function(){$('.inner').hide('slow');},2000);
   $('.inner').show('slow');
},function(){
    $('.inner').stop(true, true).hide('slow');
})

我希望当“内部”显示时，它会在几秒钟后自动消失

所以我写 setTimeout（function（）{$（'。inner'）。hide（'slow'）;}，2000）; 作为上面代码中的注释

但是攻击不好，here is the online case当鼠标放在另一个“项目”上时它无法重置“settimeout”，那么我该如何解决问题？

谢谢！

Answer 1

尝试使用clearTimeout（mytime）;作为.hover第二个参数函数的第一行。

$(".item").hover(function(){
   myTime = setTimeout(function(){$('.inner').hide('slow');},2000);
   $('.inner').show('slow');
},function(){
    clearTimeout(myTime);
    $('.inner').stop(true, true).hide('slow');
})

此代码未经过测试，但应该向您发送正确的方向...我希望。

Answer 2

试试这个：

$(".item").hover(function() {
$('.inner').show('slow');}, 
function() {var timer = setTimeout(function() {
clearTimeout(timer);
$('.inner').stop(true, true).hide('slow');
}, 2000);
});

编辑修复我的错误... http://jsfiddle.net/3p4MU/10/

当鼠标悬停在另一个上时，我想要div显示，并在几秒钟后使用jquery自动消失

2 个答案: