0

このページに取り組んでいます: 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>
4

1 に答える 1

0

あなたCSSだけでそれを行うことができます;）

を使用CSS3 Transitionすると、遷移する各プロパティに対して、n1 秒の長さ、オプションの遅延の n2 秒後 (および遷移のタイプですが、ここでは興味深いものではありません。デフォルトは easy です) を指定できます。

ちなみに、norCSS3 Transitionでは動作しません。のようなトリックを使用するか、可視領域の外に移動するか、z-index を変更するか、場合によっては Opacity を使用するのが最適な選択です。DisplayVisibilityheight: 0px;

で開始し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;
}
于 2013-02-22T09:53:24.670 に答える