日々のデザイン現場で発生する問題・難題を解決します!
WEB制作トラブル速戦即決術! 第4回
[TROUBLE 21] |
リンクに:hover疑似クラスを 指定したのに正常に適用されない |
文=加藤善規(デジパ(株))
A. | :hover疑似クラスは:link/:visited疑似クラスよりあとに書く |
CSSは「カスケード」と呼ばれる規則によって、あとから読み込まれたスタイルを優先的に扱う仕組みになっている。:hover疑似クラスを:link/:visited疑似クラスよりも先に記述してしまうとスタイルが上書きされ、意図した結果にならない。つねに意識してあとに書こう。
リンクに各疑似クラスを指定する場合は、「:link」、「:visited」、「:hover」、「:active」の順番で記述するようにすれば期待どおりの結果を得ることができる
「:active」、「:hover」、「:link」、「:visited」の順で記述すると上段のように意図したとおりにならない。下段は正しく記述した例
[INDEX]
>>> [TROUBLE 18]メインカラムとサイドバーの高さがそろわない
>>> [TROUBLE 19]レイヤーにFlashが重なりz-indexの設定も効かない
>>> [TROUBLE 20]parseInt()関数がうまく動作しない
>>> [TROUBLE 21]リンクに:hover疑似クラスを指定したのに正常に適用されない
>>> [TROUBLE 22]PhotoshopからPNGを書き出すのに時間がかかる