在工具提示懸停上取消淡出效果

Question

我需要一個帶有超鏈接的工具提示，用於網站。我寫了下面的代碼，似乎它工作正常，期待一個問題，一旦我將鼠標懸停在工具提示框上，它就會淡出，然後淡入。當我以某種方式打開它時，我需要防止淡出。我試圖使用stop（）方法，但它不起作用，很可能我做了錯誤的事情:)請幫忙。謝謝。

HTML

<div id="hover"> 
    <div class="tooltip"> 

     <a href="#"></a> 
     <a href="#"></a> 
     <a href="#"></a> 

    </div> 
</div> 

CSS

body{ 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 
#hover { 
    position: relative; 
    width:50px; 
    height:50px; 
    background: green; 
} 
.tooltip { 
    position: relative; 
    width: 45px; 
    top: 80px; 
    height: 20px; 
    border: 1px solid black; 
    padding: 5px; 
} 
a{ 
    display: inline-block; 
    margin-top: 5px; 
    height: 10px; 
    width: 10px; 
    border: 1px solid black; 
    background: red; 
} 

JQuery的

$(document).ready(function(){ 
    $(".tooltip").hide(); 

    $("#hover").hover(function(){ 
     $(this).find(".tooltip").fadeIn(); 
     },function(){ 
     $(this).find(".tooltip").delay(1000).fadeOut(); 
    }); 
}); 

演示是在這裏http://jsfiddle.net/8gC3D/2904/

Answer 1

您可以使用.stop（）清除動畫隊列。

當.stop（）被調用的元素上，當前正在運行的動畫 （如果有的話）立即停止。

1. 您需要刪除延遲（1000）在第二 函數傳遞給懸停（）方法施加。

2. 還要確保添加停止（）方法，如果您快速懸停出來制止任何當前 動畫並清除隊列。

   $("#hover").hover(function(){ 
       $(this).find(".tooltip").stop().fadeIn(); 
       },function(){ 
       $(this).find(".tooltip").stop().fadeOut(); 
   }); 
   

確保其包裝都在一個文件準備好功能。

的jsfiddle：http://jsfiddle.net/a_incarnati/8gC3D/2905/

$(document).ready(function(){ 
 
    $(".tooltip").hide(); 
 
    
 
    $("#hover").hover(function(){ 
 
     $(this).find(".tooltip").stop().fadeIn(); 
 
     },function(){ 
 
     $(this).find(".tooltip").stop().fadeOut(); 
 
    }); 
 
});

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#hover { 
 
    position: relative; 
 
    width:50px; 
 
    height:50px; 
 
    background: green; 
 
} 
 
.tooltip { 
 
    position: relative; 
 
    width: 45px; 
 
    top: 80px; 
 
    height: 20px; 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
} 
 
a{ 
 
    display: inline-block; 
 
    margin-top: 5px; 
 
    height: 10px; 
 
    width: 10px; 
 
\t border: 1px solid black; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id="hover"> 
 
    <div class="tooltip"> 
 
\t \t 
 
     <a href="#"></a> 
 
     <a href="#"></a> 
 
     <a href="#"></a> 
 
\t \t 
 
    </div> 
 
</div>

Answer 2

也許問題出在jQuery的動畫隊列嘗試使用.stop method清除以前的隊列是這樣的：

$(document).ready(function(){ $(".tooltip").hide(); 

$("#hover").hover(function(){ 
    $(this).find(".tooltip").stop().fadeIn(); 
    },function(){ 
    $(this).find(".tooltip").stop().delay(1000).fadeOut(); 
}); 

}); 

1. https://api.jquery.com/stop/
2. https://css-tricks.com/examples/jQueryStop/