a要素やリスト要素などにマウスを乗せた時に背景色を変えるCSSをよく見かけます。
a:hoverやli:hoverといったCSSの記述はなじみがあります。
同じことを複数並んだdiv要素にclass指定付きで行おうとして、hoverの書き方が実はよくわかっていなかったので、メモしておきます。
そもそもhoverの書式は?
hoverの書式を調べてみますと、
セレクタ:hover { プロパティ:値; プロパティ:値; …; }
となっています。
hoverの前がセレクタとなっています。要素ではない点に注目しなければなりません。
セレクタということは、class名でもいいということです。
divにhoverを指定する例
以下のようなHTMLがあったときに、hogeというclassを持つdiv要素にマウスを乗せた時に背景色を変更するCSSはどうなるでしょうか?
<div>
<div class="hoge"></div>
<div class="hoge"></div>
<div class="hoge"></div>
<div class="hoge"></div>
</div>
次のようなCSSを書くことで、簡単にhogeをclassにもつdiv要素にhoverを指定できます。
要素のdivは必要なくて、セレクタのhogeだけでよいということです。
.hoge:hover{
backgroud : #333;
}
まとめ
hoverは使う機会が多いのですが、CSSのカスタマイズはいつもコピペで済ましているため、こんな時はどうするんだろう?と考えるときに応用が利きません。折に触れて原典にあたって基礎を確認しておくのは大事なことだと思います。