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。這不應該是一個問題。