如果图像未悬停则隐藏 div

发布于 2024-12-11 04:30:23 字数 602 浏览 0 评论 0原文

好吧,我读过各种类似的问题,但我没有找到我的特定问题的答案。在我的网站上,我有一个图像列表,悬停时会放大,并且该图像旁边会出现一个 div,显示它是哪种类型的图片。鼠标移开时,div 消失,图像返回到之前的状态。如果我慢慢地将鼠标悬停在图像上,那么一切都很好,但是当我相当快地悬停在一些图像上时,即使图像不再悬停,所有 div 都会出现并保持可见。所以我的问题是:如何设置,即使我快速悬停图像,div 也会消失?

$("ul.graphThumbs li").hover(function() {
    $(this).find(".graphInfo").css({"z-index":"9999"}).hide().delay(300).fadeIn(700);
},function(){
    $(".graphInfo").hide();
});

我需要类似 if ("ul.graphThumbs li") 未悬停则 (".graphInfo").hide() 的内容。这样,只有当部分 ("ul.graphThumbs li") 悬停时,(".graphInfo") 才会显示。 希望我说得足够清楚。

Ok, I've read all kinds of similar questions but I didn't find an answer for my particular issue. On my site I have a list of images which zooms in on hover and a div in side that image appears showing which type of picture is it. On mouse out the div disappears and the image goes back to it's previous state. All works fine if I slowly hover over the images one by one, but when I hover a few images fairly fast then all divs appear and stay visible, even if the image is not hovered any more. So my question is this: how do I set it so even if I hover images fast, the divs disappear?

$("ul.graphThumbs li").hover(function() {
    $(this).find(".graphInfo").css({"z-index":"9999"}).hide().delay(300).fadeIn(700);
},function(){
    $(".graphInfo").hide();
});

I need something like if ("ul.graphThumbs li") is not hovered then (".graphInfo").hide(). so that (".graphInfo") can be shown only if some of ("ul.graphThumbs li") is hovered.
Hope I was clear enough.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

最美的太阳 2024-12-18 04:30:23

使用 css

div.about{display:none;}
img:hover + div.about{display:block;}

作为一个快速示例
http://jsfiddle.net/lastrose/ssHRd/

如果你想坚持使用 jquery,.stop () 并在开始另一个动画之前清除队列。

$("ul.graphThumbs li").stop(true)

use css

div.about{display:none;}
img:hover + div.about{display:block;}

as a quick example
http://jsfiddle.net/lastrose/ssHRd/

if you want to stick to jquery, .stop() and clear the queue before starting another animation.

$("ul.graphThumbs li").stop(true)
若沐 2024-12-18 04:30:23
$("ul.graphThumbs li").hover(function() {
    $('.graphInfo').stop(true);  
    $(this).find(".graphInfo").css({"z-index":"9999"}).hide().delay(300).fadeIn(700);
},function(){
    $(".graphInfo").hide();
});
$("ul.graphThumbs li").hover(function() {
    $('.graphInfo').stop(true);  
    $(this).find(".graphInfo").css({"z-index":"9999"}).hide().delay(300).fadeIn(700);
},function(){
    $(".graphInfo").hide();
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文