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