jQuery的檢測懸停在一個元素而不是元素含量

Question

這裏是頁我與合作：http://jimeagle.com/new/music/

我想使它所以當你將鼠標懸停在一排的形象示人，當你離開該行的圖像顯示，但是因爲（我認爲）圖像位於懸停div中，所以當您將鼠標懸停在圖像上方時，圖像保持可見。

我試圖將圖像移出懸停div，但它造成了一些可怕的閃爍，因爲當你在圖像上時，你不再是懸停div。

任何方法？謝謝。

Answer 1

用class "music_row"獲得div的高度。如果鼠標y位置（在mousemove上）高於計算的高度，請隱藏image。

$(document).ready(function() { 
    var iHeight = $(".music_row").height(); 
    $(".music_wrapper") 
     .mouseover(function() { 
      $(this).find('.image').show(); 
     }) 
     .mousemove(function(o) { 
      if (o.layerY > iHeight) { 
       $(this).find('.image').hide(); 
      } 
     }) 
     .mouseout(function() { 
      $(this).find('.image').hide();   
     }); 
}); 

另請參閱我的jsfiddle。

Answer 2

我會建議不要這樣做，實際上。我認爲直觀的一點是，當您將鼠標懸停在數字/文本上時，圖像彈出，但在圖像中移動鼠標不應該做任何事情。

如何將圖像向右移動一點讓大數仍然至少部分可見？然後轉移到下一個＃以查看下一個圖像會很自然。

Answer 3

因爲圖像是您綁定處理程序的元素的子元素，所以將防止鼠標事件被觸發，除非指針也離開容器，即.music_wrapper。

要解決此問題，您可以創建絕對定位的「不透明度」的「ghost」元素，並使用它來觸發懸停事件。事情是這樣的：

$(function() { 
    $('.music_wrapper').each(function() { 
     var ghost = $(this).find('.music_row').clone(); 
     ghost.css({opacity: 0, position: 'absolute', overflow: 'hidden' }); 
     ghost.hover(
      function() { $(this).parent().find('img').show(); }, 
      function() { $(this).parent().find('img').hide(); } 
     ); 
     $(this).append(ghost); 
    }); 
}) 

沒有測試，但是這應該重新創建.music_row div元素在每一個.music_wrapper，設置一些CSS屬性，綁定懸停處理程序，並將其附加到包裝元素。

現在圖像和懸停元素是分離的，即使鼠標仍然懸停在圖像上，它仍可以隱藏圖像。