2

background-colorをからredに変更する必要がありtransparentます。

この変更は、div にカーソルを合わせると発生するはずです。

その理由はtransparent、メインの div の下に絶対位置の div を表示できるようにするためです。つまり、親の div にカーソルを合わせると、子の div を表示する必要があります。

この div からカーソルを離すとreverse-transition、背景が透明のままになり、カーソルを離した後も青い div が常にそこにあるようにします。

純粋な CSS ソリューション (JS/JQuery なし) が必要なので、CSS3 トランジションに入りました。

<div id="parent">
     <div id="child">
     </div>
</div>

これはフィドルです(Firefox)。

#parent
{
     background:red;
     -moz-transition:background 1s;
}
#parent:hover
{
     background:transparent;
}

たとえば、透明なままにする一時的な期間を与えることでこれを行うanimationことができるので、これを で行うことを考えました。fake

0% {background:red;}
1% {background:transparent;}
100% {background:transparent;}

しかし、カーソルを離すとアニメーションが停止します。

注: これはばかげている、またはばかげているように聞こえるかもしれませんが、私の意図はこれよりも大きく、これはほんの一例です。

4

3 に答える 3

1

transition-delay物件を見てみましょう。

#parent { transition-delay:999999s; }
#parent:hover { transition-delay:0s; }

フィドル

このように、ホバー アニメーションは即座に発生しますが ( 0s)、初期状態への遷移は、ページを離れずに 277 時間後にのみ発生します。必要に応じて値をさらに大きくすることもできますが、実際のページではこの値で十分だと思います。=]

于 2013-02-20T12:13:48.187 に答える
0

純粋なCSSでは不可能だと思います。妥協案として、JavaScriptを使用して要素にクラスを追加し、CSSですべてのビジュアルを処理できます。

http://jsfiddle.net/ZvcgP/1/

HTML

<div class="effect">Hover me</div>

CSS

.effect {
    background-color: red;

    -webkit-transition:background 1s;
    transition:background 1s;
}

.effect.anim-done {
    background-color: transparent;
}

JS

$('.effect').mouseenter(function () {
    $(this).addClass('anim-done');
});
于 2013-02-20T12:11:04.997 に答える
0

以下のコードを使用して、赤から透明に移行します。「オブジェクト」をオブジェクトのクラスに変更してください

.object {

background-color: red;

-webkit-transition:background-color 1s linear;  /*   for webkit supported browsers   */
-moz-transition:background-color 1s linear;  /*   for old mozilla browsers   */
-o-transition:background-color 1s linear;  /*   for opera browsers   */
transition:background-color 1s linear;  /*   for css3 supported browsers   */
}

.object:hover {
background-color: transparent;

}

于 2013-02-20T12:50:17.043 に答える