「hoverを使っているはずなのに別の要素が動かない！効かない！」という場合の対処方法を説明します。
この記事を読んでできること
・hoverの使い方を理解することができる
・コピペするだけで、動かしたい要素をhoverで自由に動かすことができる
hover の基本
まず、こちらをご覧ください。
hoverが効かない時のよくあるミスを2種類作りました。
左側の要素(黄色)はホバーすると、グレーになったり文字が赤くなったりします。
どこが間違っているのでしょうか。
【hover よくあるミス2種類】
「:hover」の前に空白がある
とても多い間違いです。私はよくやってしまいます。
正解例と比較してみてみましょう。
失敗例）.sippai :hover{}
「:hover」の前に空白があると子孫要素と判定されてしまい、正常に動きません。
これを意識すれば、コーディングのスピードもかなり速くなるでしょう。
「:hover」は空白なく詰める。
まず、これが1つ目になります。
疑似要素の後につけている
ボタンの装飾などに「::before」や「::after」などの疑似要素を使うことがあると思います。上の【hover よくあるミス2種類】の例で言えば”〇”を動かしたい、変化を与えたい時は要注意です。
「:hover」は疑似要素ではなくボタン側（親要素）に接続します。
失敗例）.sippai2::before:hover{}
使用頻度が高くない為にこのようなミスも多いです。
→「.seikou2」「:hover」「::before」
親要素を動かそうとしている
別の要素をhoverで動かしたい！という場合、条件があります。
つまり、「子要素にマウスが乗ったとき、親要素を動かす」ことは現在のCSSではできません。
これを実現する為にはjavascript(jQuery)を使うことになりますが複雑になりがちです。親要素を動かさないデザインを考えた方がコードも短く簡潔になります。
親要素を飛び越えた要素、兄要素も同様に動かすことができないので、ご注意ください。
範囲が違う
hoverは要素にマウスを当てると動きます。
しかし、感覚的に「あれ?hoverがちゃんと動いてない?」となることがあります。
これを頭に入れると、hoverの範囲を意識しながらレイアウトをスムーズに進めることができます。
hoverの範囲が分からなくなってしまった場合は
要素にbackgroundで背景色をつけましょう。色が変わったところがhover範囲です。
「:hover」が効く範囲を今一度確認してみましょう。
まとめ
hoverについての疑問は解消できたでしょうか。
解消できない場合はコピペすれば、問題なく使うことができると思いますのでご活用ください。