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

Question

嗨大家我有这个小Jquery脚本:链接文本

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

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

我工作得很好,但我希望能够将鼠标悬停在图像中的文本上,每次尝试时,它都会"保持弹跳"

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

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.这应该不是问题.