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();
  }
});