ホームへ

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

2020年02月18日

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が効くようになります。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

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

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

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

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

その他

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

まとめ

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

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

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

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ