Jquery 마우스 이벤트

Question

겉으로보기에는 간단한 문제를 해결하는 방법에 대해서는 잘 모릅니다. 앨범 커버 위로 마우스를 가져 가면 fadesIn (i) 아이콘 위로 마우스를 가져 가면 툴팁이 나타나지만 12 초 후에는 페이드 아웃 상태를 유지하지 않습니다. 어떻게하면 (i) 아이콘 위로 마우스를 가져 가면 아이콘 위에 머무르고 마우스가 아이콘을 떠날 때 fadsOut를 누르면 툴팁이 유지된다는 것을 어떻게 수정할 수 있습니까? 여기

예 : 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 (근원의 nges는 민주당 원이 더 이상 작동하지 않는다.).