Jquery鼠標事件

Question

我不知道如何解決看似簡單的問題。如果將鼠標懸停在專輯封面上，則會淡入（i）圖標，如果您將鼠標懸停在（i）圖標上，會出現一個工具提示，但它在1,2秒後不會停留在淡出狀態。我如何解決這個問題，當鼠標懸停在（i）圖標上並且當鼠標離開圖標時fadesOut停留在工具提示上。

這裏舉例：http://www.midnightlisteners.com

我的代碼：

//  (i) Icon 

    $(".play, .more-info").mouseenter(function(){ 
     clearTimeout($(this).data('timeoutIds')); 
     $(this).next(".more-info").fadeIn(600); 
    }).mouseleave(function(){ 
     var someElement = $(this); 
     var timeoutIds = setTimeout(function(){ 
      someElement.next(".more-info").fadeOut('150'); 
     }, 1200); // giving a shorter time will reduce the fadeout effect 
     //set the timeoutId, allowing us to clear this trigger if the mouse comes back over 
     someElement.data('timeoutIds', timeoutIds); 
    }); 

//工具提示

$(".more-info").mouseenter(function(){ 
     clearTimeout($(this).data('timeoutId')); 
     $(this).find(".the-tooltip").fadeIn('150'); 
    }).mouseleave(function(){ 
     var someElement = $(this); 
     var timeoutId = setTimeout(function(){ 
      someElement.find(".the-tooltip").fadeOut('150'); 
     }, 1200); 
     //set the timeoutId, allowing us to clear this trigger if the mouse comes back over 
     someElement.data('timeoutId', timeoutId); 
    }); 

Answer 1

試試這個

$(function(){ 
    var timeoutIds=0; 
    $(".play").on('mouseenter', function(){ 
     $(this).next(".more-info").fadeIn(600); 
    }).on('mouseleave', function(){ 
     var someElement = $(this); 
     timeoutIds = setTimeout(function(){ 
      someElement.next(".more-info").fadeOut('150'); 
     }, 1200); 
    }); 

    $(".more-info").mouseenter(function(){ 
     clearTimeout(timeoutIds); 
     $(this).find(".the-tooltip").fadeIn('150'); 
    }).mouseleave(function(){ 
     var someElement = $(this); 
     timeoutId = setTimeout(function(){ 
      someElement.find(".the-tooltip").fadeOut('150'); 
     }, 300); 
    }); 
});​ 

DEMO（由於茶演示版的源代碼不再工作）。