聚焦时的工具提示淡出

Question

我有一个简单的代码，当您将鼠标悬停在元素上时，我会显示工具提示（通过更改显示属性）。有什么方法当我将鼠标悬停在工具提示上时，工具提示不会淡出。

$('.element').mouseenter(function(){  
    $(this).find('.tooltip').fadeIn();
}).mouseleave(function(){       
    $(this).find('.tooltip').fadeOut();  // I want the tooltip to not fadeout if move is over tooltip element
});

Answer 1

描述

如果您的工具提示是.element的子元素，则不会消失。

另一件事，我建议您使用jQuery的.hover()方法。

查看我的示例和此jsFiddle Demonstration

示例

<div class="element"> 
    hover me
    <div style="display:none" class="tooltip">Iam your tooltip</div>
</div>


$('.element').hover(function(){  
     $(this).find('.tooltip').fadeIn();
}, function(){         
     $(this).find('.tooltip').fadeOut();
});

更多信息

• jQuery.hover()

Answer 2

$(this).find('.tooltip').mouseover(function(){  
$(this).find('.tooltip').stop().fadeTo('fast', 1);
});
$(this).find('.tooltip').mouseout(function() {
$(this).find('.tooltip').stop().fadeTo('fast', 0);
});

Answer 3

我会说

$('.tooltip,.element').mouseenter(function() {  
  $(this).find('.tooltip').fadeIn();
}).mouseleave(function() {       
  $(this).find('.tooltip').fadeOut();
});

如果工具提示和元素之间有空格，那么在隐藏之前你需要一个延迟，在这种情况下，我建议你使用像优秀qtip这样的插件。