Jquery - 我该如何解决这个图像翻转？

Question

嗨，大家好我这个小jQuery脚本：link text

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

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

我工作得很好，但我希望能够每次我试图悬停在位于图像的文本，它只是不断“跳票”

任何帮助深表感谢，感谢 ， 基思

Answer 1

好问题。

问题似乎是，当鼠标放在段落上时，鼠标不在图像上。所以这个段落是隐藏的。当段落隐藏时，鼠标再次位于图像上，所以段落再次显示。等等...

一个很好的解决方案是使用的mouseenter和鼠标离开事件，而不是鼠标悬停及移出：

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

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

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

}); 

主要的区别的mouseenter之间/鼠标离开事件和鼠标悬停/鼠标移开事件是前者不泡。

在此示例中，div＃图像的子段落仍然会收到mouseenter/mouseleave事件（即使您未在侦听它们），但事件不会冒泡到其父元素。请参阅this page关于它的扩展讨论。

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