如何讓DIV避免在小貓上跳躍？

Question

這個小片段的目標是（默認情況下）顯示圖像數據，然後通過「slideDown」onMouseOver將其刪除。它主要工作，但是如果將鼠標懸停在文本上時顯示信息，則div會像瘋狂一樣上下跳動。任何幫助，以補救這一點，表示讚賞！

演示： http://jsfiddle.net/voudini/SggsV/

Answer 1

使用onmouseenter和onmouseleave

試試這個

$('.hoverbox') 
    .mouseenter(function(){ 
     $(".hoverinfo", this).stop(true, true).slideUp(400); 
    }) 
    .mouseleave(function(e){ 

     $(".hoverinfo", this).stop(true, true).slideDown(400); 
    }); 

Updated Fiddle

檢查其文檔

Mouse Enter和 Mouse Leave

MouseEnter事件從鼠標懸停在不同它處理 事件冒泡的方式。如果在此示例中使用了鼠標懸停，那麼當鼠標指針移動到Inner元素上時，處理程序將觸發 。這通常是不受歡迎的行爲。另一方面，mouseenter事件 只在鼠標輸入綁定的元素 而不是後代時觸發其處理程序。所以在這個例子中，當鼠標進入Outer元素時觸發 處理程序，但不是內部元素的 。