Question

我从jQuery .hover()方法得到了一个奇怪的行为。我有img个，每个人都应该在悬停时显示下一个容器.item-info。我正在使用此代码：

  $('img.thumbnail-class').hover(function() { 
      $(this).next(".item-info").stop(true, true).fadeIn(250); 
  }, function() { 
      $(this).next(".item-info").stop(true, true).fadeOut(250); 
  });

我得到了这种行为：当图像.thumbnail-class悬停时，下一个.item-info淡入，淡出，淡入并停留。当鼠标仍悬停在图像上但移动时，.item-info淡出并再次等，直到鼠标离开图像。

我已经尝试了推荐的.stop()方法来悬停问题，但似乎没有帮助。

谢谢！

Answer 1

如果某个元素被另一个元素覆盖，则会激活

mouseout（因此调用了第二个悬停函数）因此您的方案无法正常工作。而是做这样的事情：

$('img.thumbnail-class').mouseover(function() { 
      $(this).next(".item-info").fadeIn(250).one("mouseout", function(){
          $(this).fadeOut(250); 
      });
});

看到这个小提琴：http://jsfiddle.net/p8nfyjux/

当元素仍悬停时，.hover（）不断重复

1 个答案: