マンガでわかるホームページ作成

CSSでaタグのhoverが効かない・文字色が変わらない原因と修正方法

hoverを使うとaタグの文字の色など変えることができます。

しかしちょっとしたことでhoverがうまく効かないことがあります。

CSSでaタグのhoverが効かない・文字色が変わらない原因と修正方法を解説します。

結論

  1. 「hover」 を「visited」より後に指定する
  2. position:absoluteの要素より前に持ってくる

原因1.「:hover」を「:visited」の前に指定している

hoverしても文字色が変わらないときは「:hover」 を「:visited」よりに指定しましょう。

「:visited」はリンク済みの要素に対して指定する疑似クラスです。

「:hover」はマウスが乗っているときに変化させるための疑似クラスです。

では、リンク済みでかつマウスが乗っているとき、どちらの指定がきくのでしょうか。

ヒントはこちらの記事にあります。↓

答えは、「後述された方」です。

以下の例「テキスト」のリンクですが、まず一回クリックしてください。
すると 「visited」 で指定した色に変わります。
その後マウスオーバーして色が変わるか確認してください。

失敗例 「hover」 を「visited」よりに指定したとき

テキスト

CSS

a:hover{
    color: red;
}
a:visited{
    color: green;
}

成功例 「hover」 を「visited」よりに指定したとき

テキスト
a:visited{
    color: green;
}
a:hover{
    color: red;
}

このように「:hover」を後述すればこちらが優先されるためhoverが効くようになります。

原因2.position:absoluteの要素が乗っている

position:absoluteを指定した要素は位置を自由に変更でき、他の要素の上にかぶせることができます。

aタグの上に要素が乗っているとき、aの上にガラス板が乗っているような状態です。aは見えますが、触れません。

z-indexを指定してaタグより下になるようにしましょう。

その他

上記にも当てはまらない場合、他が原因かもしれません。
↓こちらの記事を参考にしてみてください。

まとめ

hoverしても文字色が変わらないときは 「hover」 を「visited」より後に指定しましょう。

position:absoluteが乗っかていないか確認しましょう。

以上、CSSでaタグのhoverが効かない・文字色が変わらない原因と修正方法でした。

関連記事