Question

当用户悬停一个块时，我会看到一个小的工具提示脚本，将显示工具提示，如果用户离开该块，则隐藏工具提示。

但我也希望当用户将鼠标悬停在工具提示上时，工具提示会一直停留，直到用户离开工具提示或悬停块。

这是我的javascript，没有悬停在工具提示上：

$( "#hover, .tooltip" ).on('mouseenter', function() { 
   $( ".tooltip" ).fadeToggle( 400, function() {
       // Animation complete.
    });
});

$( ".tooltip, #hover" ).on('mouseleave', function() {
      $( ".tooltip" ).fadeToggle( 400, function() {
         // Animation complete.
      });
});

这是一个没有第二部分的小提琴： http://jsbin.com/vocirucawoje/1/edit

Answer 1

使用stop（）停止动画。

$( "#hover, .tooltip" ).on('mouseenter', function() { 
   $( ".tooltip" ).stop().fadeToggle( 400, function() {
       // Animation complete.
    });
});

$( ".tooltip, #hover" ).on('mouseleave', function() {
      $( ".tooltip" ).stop().fadeToggle( 400, function() {
         // Animation complete.
      });
});

Answer 2

<input type="button" class="hover" value="Click" />
<div class="tooltip" style="display:none;">Tool tip Text</div>


$('.hover').mouseenter(function () {
    $(".tooltip").stop().fadeToggle(400, function () {
        // Animation complete.
    });
});
$('.tooltip').mouseleave(function () {
    $(".tooltip").fadeToggle(400, function () {
        // Animation complete.
    });
});

它会帮助你。

悬停的Jquery工具提示

2 个答案: