当鼠标悬停在另一个鼠标上时，我想要div显示，几秒钟后用jquery自动消失 [英] I want the div show when mouse hover on another, and disppear automatic after few seconds with jquery

问题描述

首先这里是我的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）; 作为上面代码中的注释

但保护不好，这里是在线案例，它不能重置settimeout当鼠标放在另一个物品上时，我该如何解决问题？

谢谢！

解决方案

尝试把clearTimeout（mytime）;作为你的.hover的第二个参数函数的第一行。
$ b $ $ $ $ $ $ $。item）。hover（function（）{
myTime = setTimeout（function（）{$（'。inner'）。hide（'slow'）;}，2000）;
$（'。inner'）。show（'slow'） ;
}，function（）{
clearTimeout（myTime）;
$（'。inner'）。stop（true，true）.hide（'slow'）;
}）

这段代码没有经过测试，但应该给你正确的方向......我希望。

first here is my html code:

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

when my mouse over the "item",the "inner" show,when mouseout the "inner" disppeared:

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

as well I want when "inner" showed,it will disppear automatic after few seconds

so I write setTimeout(function(){$('.inner').hide('slow');},2000); as the note in code above

but the resault is not good ,here is the online case it cann't reset the "settimeout" when mouse on another "item",so how can I solve the problem?

Thank you!

解决方案

Try putting clearTimeout(mytime); as the first line in your .hover's second parameter function.

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

This code was not tested but should send you in the right direction...I hope.

这篇关于当鼠标悬停在另一个鼠标上时，我想要div显示，几秒钟后用jquery自动消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！