こんにちは朱夏です。
今回は、疑似要素の「hover」を使ってマウスを乗せた時に要素を変化させる方法を解説してみたいと思います。
マウスを乗せた時に色を変えたり動きを付けたりして、見ていて飽きないページを作りたい。
マウスホバーのアニメーションなどは、基礎の部分からは一段上がるので躓く人も多いと思います。
私も初めは変化の前後の指定方法に手間取ったりしました。
今回はその辺りの躓きそうなポイントも含めて解説していきたいと思います。
それではいってみましょう。
hoverの基本的な書き方
マウスホバーで別の場所を変化させる
あとがき
hoverの基本的な書き方
「hover」の基本的な書き方を紹介します。
先ずはサンプルを置いておきますね。
See the Pen
yLYNwBv by 朱夏 (@syunatsu1)
on CodePen.
書き方の手順としては3ステップになります。
- 元になる要素のスタイルを付ける
- 「div:hover」をセレクタに指定
- 変化させたいスタイルだけ指定する
今回は、赤い正方形にマウスカーソルを乗せると青くなる様にしてみました。
ココでのポイントはこちら。
私は昔、hover側にも変化させないプロパティのスタイルを全部書いていました。
それでも動作はするのですが、あまりお勧めできません。
理由は、
- 無駄な容量
- 誤動作の温床
- コードが見づらい
変化のない部分を重複して書けば、その分無駄に容量を使います。
また、変化させたくないプロパティを余分に書くことで、スペルミスなどにより想定と違った結果が出てしまう原因になることもあります。
あとは単純に行数が増えるのでコードは見づらくなります。
マウスホバーで別の場所を変化させる
こちらは応用編になります。
マウスカーソルを乗せる場所と、実際に変化させる要素を別々に指定する方法です。
サンプルはこちら。
See the Pen
wvKaZzY by 朱夏 (@syunatsu1)
on CodePen.
黄色部分にマウスを乗せると、赤い四角が青色になります。
セレクタの指定方法を応用すると、同一階層にある複数のセレクタを同時に変化させたり、子要素を指定したりする事が出来ます。
この方法は便利ですが、１つだけ難点があります。
それは、「hover」を付けたい要素よりも前に書かれた要素や、親要素などの上位に対しては指定できない事です。
今後、CSSのバージョンアップなどで改善されるかもしれませんが、表示の入れ替えなどを行うことで疑似的に実現させる方法になってしまいますね。
あとがき
というわけで、「hover」の使い方について解説してみました。
今回のまとめはこちら。
- 書き方は「セレクタ名:hover {～}」
- 変化させたいプロパティだけ書く
- 変化させたい対象は、ホバー要素以降か下層の要素のみ指定可能
「hover」を覚えれば、サイト作りも楽しさが増えていくと思います。
今回は以上です。
次回もよろしくお願いします。
