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（由于茶演示版的源代码不再工作）。