スポンサーリンク

【CSS】hoverで要素が動かない!効かない!場合の対処法【コピペOK】

javascript


「hoverを使っているはずなのに別の要素が動かない!効かない!」
という場合の対処方法を説明します。

この記事を読んでできること

hoverの使い方を理解することができる
コピペするだけで、動かしたい要素をhoverで自由に動かすことができる

hover の基本

まず、こちらをご覧ください。
hoverが効かない時のよくあるミスを2種類作りました。

左側の要素(黄色)はホバーすると、グレーになったり文字が赤くなったりします。
どこが間違っているのでしょうか。

【hover よくあるミス2種類】

「:hover」の前に空白がある

とても多い間違いです。私はよくやってしまいます。
正解例と比較してみてみましょう。

正解例).seikou:hover{}
失敗例).sippai :hover{}

「:hover」の前に空白があると子孫要素と判定されてしまい、正常に動きません。

これを意識すれば、コーディングのスピードもかなり速くなるでしょう。

「:hover」は空白なく詰める。

まず、これが1つ目になります。

疑似要素の後につけている

ボタンの装飾などに「::before」や「::after」などの疑似要素を使うことがあると思います。上の【hover よくあるミス2種類】例で言えば”〇”を動かしたい、変化を与えたい時は要注意です。

「:hover」は疑似要素ではなくボタン側(親要素)に接続します。

正解例).seikou2:hover::before{}
失敗例).sippai2::before:hover{}
使っているプロパティは正しいのですが、順番が異なるだけで正常に動きません。
使用頻度が高くない為にこのようなミスも多いです。
・「①クラス」「②hover」した時に「③疑似要素」を変化させたい
「.seikou2」「:hover」「::before」
という順番で覚えましょう。

親要素を動かそうとしている

別の要素をhoverで動かしたい!という場合、条件があります。

【hoverで動かせる別の要素】
・子孫要素
・弟要素

つまり、「子要素にマウスが乗ったとき、親要素を動かす」ことは現在のCSSではできません。

これを実現する為にはjavascript(jQuery)を使うことになりますが複雑になりがちです。親要素を動かさないデザインを考えた方がコードも短く簡潔になります。

親要素を飛び越えた要素、兄要素も同様に動かすことができないので、ご注意ください。

範囲が違う

hoverは要素にマウスを当てると動きます。

しかし、感覚的に「あれ?hoverがちゃんと動いてない?」となることがあります。

・hoverの範囲に「margin」は含まれない

これを頭に入れると、hoverの範囲を意識しながらレイアウトをスムーズに進めることができます。
hoverの範囲が分からなくなってしまった場合は
要素にbackgroundで背景色をつけましょう。色が変わったところがhover範囲です。

「:hover」が効く範囲を今一度確認してみましょう。

まとめ

hoverについての疑問は解消できたでしょうか。
解消できない場合はコピペすれば、問題なく使うことができると思いますのでご活用ください。

javascript
スポンサーリンク
生成AI研究所