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

发布于 2024-10-06 23:33:17 字数 827 浏览 2 评论 0原文

首先是我的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”上时，“inner”显示，当鼠标移开“inner”时消失：

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

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

所以我写setTimeout(function(){$('.inner').hide('slow');},2000); 如上面代码中的注释，

但结果不好，这是网上的案例当鼠标放在另一个“项目”上时，它无法重置“settimeout”，所以我该怎么办解决问题吗？

谢谢你！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏雨凉 2024-10-13 23:33:17

尝试放置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');
})

该代码未经测试，但应该会引导您走向正确的方向......我希望。

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.

回复收藏 0 原文

因为看清所以看轻 2024-10-13 23:33:17

试试这个：

$(".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/

Try this:

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

Edited to fix an error on my part...
http://jsfiddle.net/3p4MU/10/

回复收藏 0 原文

~没有更多了~