Question

我在此页面上工作：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秒长度，在可选延迟的n2秒之后（以及转换的类型，但这里没有意思，默认是轻松的）

顺便说一下，CSS3 Transition不适用于Display也不适用Visibility;您将不得不使用height: 0px;等技巧，或者移出可见区域，或者使用不透明度更改z-index，或者是您的最佳选择。

从opacity: 0;开始，转换为opacity: 1;中的hover。

在你的情况下：

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

在鼠标上淡出背景叠加

1 个答案: