【CSS】hoverで別の要素を動かしたいのに効かない原因5選と解決方法

「hoverしたときに別の要素を動かせるって聞いたのに効かないよ!?」

hoverで別の要素を動かしたいのに効かない原因と解決方法を5つ紹介します。

【原因1】セレクタやCSSに問題あり

まずは「:hover」を外してみましょう。

「:hover」を外したときに意図したデザインになっていない場合、セレクタやCSSに問題があります。

まずは「:hover」を外した状態でちゃんと効くように調整しましょう。

例）

#main .link:hover p span{color:red;}

↑このセレクタから↓「:hover」を外して確認

#main .link p span{color:red;}

厳密に言うと「:hover」をつけることでクラス分の優先度があがります。それを考慮して調整するといいでしょう。

【原因2】「:hover」の前に空白がある

「:hover」の前に空白があると子孫要素と判定されてしまいます。

セレクタと「:hover」は空白なく詰めましょう。

正解例）「.link:hover」は「.link」にマウスが乗ったとき

#main .link:hover p span

失敗例）「.link :hover」だと「.linkの子孫要素」にマウスが乗ったとき

#main .link :hover p span

こちらも参考にしてください。

【原因3】親要素を動かそうとしている

「hoverで動かせる別の要素」は子孫要素または弟要素です。

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

親要素を指定するにはjavascript(jQuery)を使いましょう。

ただし、CSSでつまづいているかたにjQueryを使いこなすのは難しいかもしれません。親要素を動かさないデザインを考えた方がいいかもしれません。

親要素を飛び越えた要素、兄要素も同様です。

【原因4】疑似要素の後につけている

ボタンの装飾などに「::before」や「::after」などの疑似要素を使っていて、ボタンにマウスが乗ったとき、その装飾を動かしたいとき要注意です。

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

成功例）ボタンにマウスが乗ったときの「::before」

.button:hover::before

失敗例）

.button::before:hover

【原因5】範囲が違う

「:hover」が効く範囲を勘違いしているかもしれません。

marginは含まれません。

もしその要素が透明なら、いったん「background」で背景色をつけて範囲を確認しましょう。背景色がつく部分がhoverの範囲です。

【まとめ】hoverで別の要素を動かしたいのに効かない原因

• 【原因1】セレクタやCSSに問題あり
  →「:hover」を外して意図したデザインにする
• 【原因2】「:hover」の前に空白がある
  →「:hover」を空白なく詰める
• 【原因3】親要素を動かそうとしている
  →jQueryを使う
• 【原因4】疑似要素の後につけている
  →疑似要素の前につける
• 【原因5】範囲が違う
  →背景色をつけて範囲を確認

以上、hoverで別の要素を動かしたいのに効かない原因と解決方法でした。