マウスホバー時に対象の要素の状態をじんわり変更したい場合があります。
実装時に自分がハマって悩んでしまったので、メモ的にエントリーします。
Javascriptでも実現することはできますが、今回はCSS3を使用して実現します。
なおCSS3を使用していますので、モダンブラウザが対象となります。
要素の状態をじんわり変更するために使用するのはtransition-duration
プロパティです。
詳しい使い方はこちらを参照して下さい。
ここで自分がハマってしまったのは、
「マウスホバー時に状態変化したいからdiv:hover
を使用する」ことでした。
div:hover
にtransition-duration
プロパティを指定したサンプルがこちら。
マウスホバー時はきちんと時間をかけて状態変化されましたが、
マウスを離すと一瞬にして戻ってしまいます。
なぜでしょう?
これはマウスホバーでない状態(つまり普段の状態)に対してtransition-duration
プロパティが指定されていないためです。
つまりdiv:hover
に対してではなく、div
に対してtransition-duration
プロパティを指定しなければなりません。
その場合のサンプルがこちら。
これでマウスホバー時/離した時の両方でなめらかに要素の状態を変更することができました。
ちなみに「マウスをホバーしていないとき」のことって何て呼ぶのがしっくり来るのでしょうか??