鼠标经过时的淡出背景叠加

Question

我在这个页面上工作：http://gpt.hernan.org/gpnew/v1%20(Referrals%20hover).html当悬停在转诊按钮上时，背景覆盖出现，我需要它逐渐接近。也许是一些淡入或淡出动画。

我正在使用这个脚本来运行Overlay。

<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秒长度、n2秒之后的可选延迟(以及转换类型，但这里不感兴趣，缺省为ease)。

顺便说一句，CSS3 Transition既不能与Display一起使用，也不能与Visibility一起使用；您将不得不使用像height: 0px;这样的技巧，或者移出可见区域，或者更改z索引，或者，在您的情况下，最佳选择是使用不透明度。

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