在鼠标上淡出背景覆盖

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; 
}