CSSでaタグのhoverが効かない・文字色が変わらない原因と修正方法マンガでわかるホームページ作成ホームへCSSでaタグのhoverが効かない・文字色が変わらない原因と修正方法2020年02月18日hoverを使うとaタグの文字の色など変えることができます。したことでhoverがうまく効かないことがあります。CSSでaタグのhoverが効かない・文字色が変わらない原因と修正方法を解説します。複雑なセレクタにhoverを使おうとしている場合はこちらもご覧ください。「hoverしたときに別の要素を動かせるって聞いたのに効かないよ!?」hoverで別の要素を動かしたいのに効かない原因と解決方法を5つ紹介します。原因1.「:hover」を「:visited」の前に指定している原因2.position:absoluteの要素が乗っているその他まとめ原因1.「:hover」を「:visited」の前に指定しているhoverしても文字色が変わらないときは「:hover」を「:visited」より後に指定しましょう。「:visited」はリンク済みの要素に対して指定する疑似クラスです。「:hover」はマウスが乗っているときに変化させるための疑似クラスです。リンク済みでかつマウスが乗っているとき、どちらの指定がきくのでしょうか。ヒントはこちらの記事にあります。疑似クラス、属性セレクタなど含めたCSSセレクタの優先順位と点数計算方法を解説します。この記事を読む答えは、「後述された方」です。下記は訪問済みリンクです。マウスを乗せたときどのように変化するか確認してみてください。red;}このように「:hover」を後述すればこちらが優先されるためhoverが効くようになります。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む原因2.position:absoluteの要素が乗っているposition:absoluteを指定した要素は位置を自由に変更でき、他の要素の上にかぶせることができます。aタグの上に要素が乗っているとき、aの上にガラス板が乗っているような状態です。aは見えますが、触れません。z-indexを指定してaタグより下になるようにしましょう。z-indexが効かない6つの原因と修正方法position:absoluteと「z-index」を指定すると重なり順を変更することができます。「だというのに重なり順が変わらない!?z-indexが効いていない!?」というあなたのために「z-indexが効かない6つの原因と修正方法」を説明します。上記にも当てはまらない場合、他が原因かもしれません。↓こちらの記事を参考にしてみてください。CSSが効かない原因と回避方法【よくあるケアレスミス】CSS効かない、htmlが崩れたときは以下に当てはまらないかチェックしてみてください。「visited」より後に指定しましょう。position:absoluteが乗っかていないか確認しましょう。以上、CSSでaタグのhoverが効かない・文字色が変わらない原因と修正方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。