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

jQuery：在某些情况下不要使用mouseout

1 个答案: