2

我不知道如何解决看似简单的问题。如果您将鼠标悬停在专辑封面上，则会出现一个 (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); 
  });
4

1 回答 1

1

Try this

$(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 (Due to the changes of source the demo is not working anymore.).

于 2012-09-10T18:29:54.190 回答