hoverが効かない？それ、構造やdisplayが原因かも

ボタンにマウスを乗せても、hoverの色が変わらない…？
「CSSはちゃんと書いたのに、なんで反応しないの？」
このように悩んだことはありませんか？

実はそれ、構造やdisplayの影響で「hoverできない状態」になっているかもしれません。

この記事では、hoverが効かないときによくある原因を、初心者の方にもわかりやすく整理していきます。

1. hoverを書いた要素に「マウスが当たっていない」

CSSは正しく書けていても、マウスが当たらない要素にhoverを指定していると反応しません。

.button span {
  background: red;
}

.button span:hover {
  background: blue;
}

上記のように span にhoverを書いていても、実際のHTML構造によっては span がとても小さい可能性があります。

<a href="#" class="button"><span>クリック</span></a>

つまり、hoverを書いている span にマウスが乗らなければ、スタイルは反映されないのです。

2. display: contents が使われている

次に多いのが、display: contents; を使っている場合です。
この指定は、その要素の「ボックス」を取り除いて、子要素だけを表示するという動きになります。

見た目には中の要素は表示されていますが、hoverを書いた要素自体が「マウスイベントの対象ではなくなる」ことがあります。

.card-title {
  display: contents;
}

.card-title:hover {
  color: red;
}

このように書いても、.card-title 自体が「ボックスとして存在しない」ため、マウスが当たらず :hover が効かないのです。

💡 補足（aタグは要注意！）

display: contents; は、要素のボックスをなくして中の子要素だけを表示する指定ですが、
<a>タグに使うと「リンクできない」不具合が発生することがあります。

✅ 絶対に避けたい組み合わせ

a {
display: contents;
}

3. inline要素はhoverしづらい

<span> や <strong> などの inline 要素は、hoverの対象として使うときに注意が必要です。

理由は、inline要素には幅や高さがなく、マウスの当たり判定が非常に小さいためです。

<p>この<span class="hover-text">テキスト</span>にマウスを当ててください。</p>

.hover-text:hover {
  background-color: yellow;
}

hoverは効いているのに、当たり判定が小さくて反応しづらいということもあります。

.hover-text {
  display: inline-block;
  padding: 4px;
}

このように、inline-block を指定して適度なサイズを持たせることで、hoverの反応範囲を広げることができます。

おわりに

hoverが効かない理由は、単なるCSSのミスではなく、構造上の問題でマウスが当たらないというケースが大半です。

焦って書き直す前に、以下の3点をぜひ確認してみてください。

• hoverを書いた要素に、ちゃんとマウスが当たっているか？
• displayの指定が影響していないか？
• inline要素に無理にhoverしていないか？

迷子になったときは、まず構造をひとつずつ確認してみましょう。