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（由于源代码的变化，演示不再有效了。）。

Jquery鼠标事件

1 个答案: