jQuery：在某些情况下不要鼠标悬停

Question

我有一个非常基本的问题，我无法解决（可能是因为这里是凌晨 5 点）。可以简化为：

HTML：

<img src="image.jpg" alt="logo" />
<span class="caption">This is a caption</span>

JS：

$("img").mouseover(function() {
    $('.caption').show();
});

$("img").mouseout(function() {
    $('.caption').hide();
});

使用 CSS，我使用 z-index 属性和绝对定位将标题放置在图像顶部。问题是字幕一旦悬停就会消失，然后如果鼠标仍在移动，则会再次出现，导致闪烁的烦恼。

显然，这并不意味着要发生。基本上，当标题本身悬停时，不应调用 mouseover 事件。有人解决了吗？

Answer 1

这个怎么样：

HTML：

<div class="image_hover">
  <img src="image.jpg` alt="logo" />
  <span class="caption">This is a caption</span>
</div>

JS：

$(".image_hover").live({
  mouseenter: function() {
    $(this).find('.caption').show();
  },
  mouseleave: function() {
    $(this).find('.caption').hide();
  }
});