12

わかりましたので、これが緩和されない理由がわかりません。

<style>
#over {
background: url(http://th01.deviantart.net/fs71/150/f/2013/005/0/6/dal_shabet__have__don_t_have_by_awesmatasticaly_cool-d5qkzu8.jpg);
height:150px;
width:150px;
}

#in {
background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg);
height:150px;
width:150px;
}

#in:hover {
opacity: 0;
transition: opacity .3s ease-in-out;
}

</style>

<div id="over">
<div id="in"></div
</div>
4

2 に答える 2

30

あなたが何を求めているのか正確にはわかりませんが、トランジションはマウスオーバーでのみ発生し、マウスアウトでは発生しないと言っていると思います（マウスアウトではなく、以前の状態に戻るだけです）移行中）。#inではなく、に遷移プロパティを追加する必要があります#in:hover。#inトランジションは、要素がホバーされているときにのみ発生します。トランジションの css を下に移動する#inと、マウス オーバーとマウス アウトで機能します。ホバー状態の目的の css を の下に残す必要があります。#in:hoverこの場合、不透明度は変更されますが、実際のトランジション css プロパティは の下になり#inます。

もう少し明確にするために：

#in {
    background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg);
    height:150px;
    width:150px;
    transition: opacity .3s ease-in-out; /* add this here */
}

#in:hover {
    opacity:0;
    /* and we've removed it from here */
}

知っておくべきことは、イーズインアウトはいつ移行するかとは関係がないということです。イーズインはホバー、イーズアウトはマウスアウトのように見えるかもしれませんが、実際にはイーズインアウトとは、イーズインのようなイーズインのようなものではなく、ゆっくりとイーズインおよびイーズアウトすることを意味します。ゆっくりとトランジションに入り、最後にスピードアップします。これは、遷移がいつ発生するかではなく、遷移自体のスタイルに関連しています。

あなたはすでにそれを理解しているかもしれませんが、あなたの質問に基づいて、あなたはそこで混乱していたようです.

于 2013-02-19T23:32:27.447 に答える
2

@welbornio の答えがうまくいったことがわかりましたが、最初はイーズインアウトが完全に機能しませんでした。「img」に適用すると、緩和効果は断続的にしか機能しませんでした。効果を毎回機能させるには、「img」にイーズインを適用し、「hover」にイーズアウトを適用する必要があることがわかりました。なぜこれが起こったのかはわかりませんが、誰かが同じ問題に遭遇した場合の解決策です.

于 2015-09-29T22:39:22.793 に答える