WEB制作トラブル速戦即決術！第4回

[TROUBLE 21]

リンクに:hover疑似クラスを
指定したのに正常に適用されない

文＝加藤善規（デジパ(株)）

A.	:hover疑似クラスは:link/:visited疑似クラスよりあとに書く

CSSは「カスケード」と呼ばれる規則によって、あとから読み込まれたスタイルを優先的に扱う仕組みになっている。:hover疑似クラスを:link/:visited疑似クラスよりも先に記述してしまうとスタイルが上書きされ、意図した結果にならない。つねに意識してあとに書こう。

リンクに各疑似クラスを指定する場合は、「:link」、「:visited」、「:hover」、「:active」の順番で記述するようにすれば期待どおりの結果を得ることができる

「:active」、「:hover」、「:link」、「:visited」の順で記述すると上段のように意図したとおりにならない。下段は正しく記述した例

TROUBLE 21 リンクに:hover疑似クラスを指定したのに正常に適用されない