Jquery - 如何修复此图像翻转？

Question

大家好，我有这个小 Jquery 脚本： 链接文本

$(document).ready(function() 
{
      $('#image p').hide();

      $('img').hover(function()
      {
            $('#image p').show(200); 
      }, function()
      {
            $('#image p').hide(200); 
      });
}); 

I工作正常，但我希望能够将鼠标悬停在图像中的文本上，每次我尝试时，它都会保持“弹跳”

任何帮助都非常感谢， 谢谢， 基思

Answer 1

好问题。

问题似乎是，当鼠标悬停在段落上时，鼠标不再悬停在图像上。 所以该段落被隐藏了。 当该段落被隐藏时，鼠标再次位于图像上，因此该段落再次显示。 依此类推...

一个好的解决方案是使用 mouseenter 和 mouseleave 事件而不是 mouseover 和 mouseout：

$(document).ready(function(){
    $('#image p').hide();

    $('#image').bind("mouseenter", (function(){
        $('#image p').show(200)
     }));

    $('#image').bind("mouseleave", (function(){
        $('#image p').hide(200)
     }));

});

mouseenter/mouseleave 事件和 mouseover/mouseout 事件之间的主要区别是前者不会起泡。

在此示例中，div#image 的子段落仍然接收 mouseenter/mouseleave 事件（即使您没有监听它们），但这些事件不会冒泡到其父元素。 请参阅 此页之前对此进行了广泛的讨论。

您还必须不再将事件分配给 img 标签，而是分配给包含的 div。 这应该不是问题。