0

我在这个页面上工作：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>
4

1 回答 1

0

你只能这样做CSS;）

使用CSS3 Transition，您可以为每个要转换的属性指定 n1 秒的长度，在 n2 秒的可选延迟之后（以及转换的类型，但在这里并不有趣，默认为 ease）。

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

从 开始opacity: 0;，过渡到opacity: 1;in 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;
}
于 2013-02-22T09:53:24.670 回答