Question

好的，我已经阅读了各种类似的问题，但我找不到我的特定问题的答案。在我的网站上，我有一个放大的图像列表和一个显示图像显示图像类型的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()。这样(".graphInfo")只有在("ul.graphThumbs li")的某些地方悬停时才会显示。希望我很清楚。

Answer 1

使用css

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

作为一个简单的例子 http://jsfiddle.net/lastrose/ssHRd/

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

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

Answer 2

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

如果图像没有悬停，请隐藏div

2 个答案: