css - 鼠标悬停时淡出背景叠加层

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 秒的可选延迟之后(以及转换类型，但这里没有意义，默认为轻松)。

顺便说一句，CSS3 Transition 不适用于Display 和Visibility；您将不得不使用诸如 height: 0px; 之类的技巧，或者移出可见区域，或者更改 z-index，或者，根据您的情况，最好的选择是使用不透明度。

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