3

onHover がインフォボックスを表示し、ボタンの機能を示すメニューがあります。ボタンの上にマウスを置いてから 1 秒後にボックスが表示されるようにするには、どうすれば遅延を適用できますか?

HTML:

<td class="info"><a id="login-edit_account" href="../login-edit_account.php">Edit account<span><div id="pointer"></div><p style="font-size:11px">Edit user's information.</p></span></a></td>

CSS:

td.info                     {
                            position:relative; /*this is the key*/
                            z-index:24; background-color:#ccc;
                            color:#000;
                            text-decoration:none
                            }

td.info:hover               {
                            z-index:25;
                            background-color:#fff
                            }

td.info span                {
                            display: none;
                            transition: 0s display;
                            }

td.info:hover span          { /*the span will display just on :hover state*/
                            display:block;
                            position:absolute;
                            top:42px; left:7px;
                            width:210px;
                            border:2px solid #0cf;
                            padding: 5px;
                            background-color:#fff; color:#000;
                            text-align: center;
                            -webkit-transition-delay:5s;
                            }

#pointer                    {
                            border:solid 10px transparent;
                            border-bottom-color:#0cf;
                            position:absolute;
                            margin:-27px 0px 0px 10px;
                            }
4

2 に答える 2

5

とてもシンプルです。例：

a {
    -webkit-transition: 1s 3s;
}

a:hover {
    background-color: red;
}

ユーザーがリンクにカーソルを合わせると、ブラウザーは 3 秒間待機します。これらの秒が経過した場合にのみ、バックグラウンドが赤に変わります (この場合、移行時間は 1 秒です)。

ここにフィドルがあります：http://jsfiddle.net/joplomacedo/VP7hE/

于 2013-03-24T19:08:08.893 に答える
1

はい、CSS3 のトランジションを使用して効果を遅らせることができます:hover。

CSS3 セットの仕様の一部である CSS トランジションは、CSS プロパティを変更するときにアニメーションの速度を制御する方法を提供します。プロパティの変更をすぐに有効にする代わりに、一定期間にわたってプロパティの変更を有効にすることができます。たとえば、要素の色を白から黒に変更すると、通常、変更は瞬時に行われます。CSS トランジションを有効にすると、変化は加速曲線に沿った時間間隔で発生し、そのすべてをカスタマイズできます。

あなたの場合、transition-delayプロパティに注目する必要があると思います。

遷移/使用例の使用に関するいくつかの便利なリンクを次に示します。

https://developer.mozilla.org/en-US/docs/CSS/transition-delay

http://css-tricks.com/transition-delay-delays/

http://designshack.net/articles/css/create-stunning-effects-with-css-transition-delays/

于 2013-03-24T17:47:54.077 に答える