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

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

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

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

複雑なセレクタにhoverを使おうとしている場合はこちらもご覧ください。

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

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

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

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

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

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

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

下記は訪問済みリンクです。マウスを乗せたときどのように変化するか確認してみてください。

失敗例 「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が効かない･文字色が変わらない原因と修正方法でした。