Jquery鼠标事件

Question

我不知道如何解决看似简单的问题。如果您将鼠标悬停在专辑封面上，则会出现淡出 ( i ) 图标。 如果您将鼠标悬停在 ( i ) 图标上，则会出现一个工具提示，但它不会保持不动，并会在 1.2 秒后淡出。我该如何解决这个问题:当您将鼠标悬停在 ( i ) 图标上时，工具提示会保持显示状态，而当鼠标离开该图标时，工具提示会淡出。

示例如下: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 (由于源代码的更改，演示不再工作。)。