在鼠標上淡出背景覆蓋

Question

Im Working on this page：http://gpt.hernan.org/gpnew/v1%20(Referrals%20hover).html 當鼠標懸停在推薦按鈕上時，會出現一個背景覆蓋圖，我需要它逐漸顯示。也許有些淡入或淡出動畫。

我正在使用此腳本使覆蓋運行。

<script type="text/javascript"> 
(function(){ 
    $('#coins').on('mouseenter', function(){ 
      var w = $(window).width(); 
      var h = $(window).height(); 
     $('<div></div>').appendTo('body'). 
       addClass('overlay').css({ 'width': w, 'height': h }); 
     }).on('mouseleave', function(){ 
     $('.overlay').remove(); 
     })     
})(); 
</script> 

Answer 1

只能與CSS做到這一點;）

使用CSS3 Transition，你可以指定你想過渡的每個屬性，N1秒lenght，可選的延遲N2秒（和類型後過渡，但在這裏並不有趣，默認是緩解）。

順便說一句，CSS3 Transition不適用於Display或Visibility;你將不得不使用像height: 0px;這樣的技巧，或者移出可見區域，或者改變z-index，或者在你的情況下使用Opacity來改變最佳選擇。

從opacity: 0;開始，在hover處轉換到opacity: 1;。

你的情況：

.button-hover ul ul { 
    min-width: 449px; 
    position: absolute; 
    right: 0; 
    top: 80%; 
    z-index: 598; 

    transition: all 1s ease 0s; /* new */ 
    opacity: 0; /* new */ 
    /* visibility: hidden; -> removed */ 
} 

而且在:hover代替

.button-hover ul li:hover > ul{ 
    visibility: visible; 
} 

使用

.button-hover ul li:hover > ul{ 
    opacity: 1; 
}