にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

リンクを装飾するhover疑似クラスは記述順に注意 [リンク]

スタイルシートを使えば、リンクの上にマウスポインタが載ったときの装飾を指定できます。簡単に装飾を動的に変化させられるので、様々なウェブページでとてもよく使われています。具体的には、a要素のhover疑似クラスを用いて装飾を記述するわけですが、記述する順序にちょっとした落とし穴があります。

例えば、以下のようなHTMLソースがあるとき、

<a href="http://www.nishishi.com/">にししふぁくとりー</a>

以下の2行のCSSを記述した場合を考えます。

a:hover { color: orange; }
a:link { color: darkblue; }

この場合、リンクのテキスト(文字)は普段は濃青色で表示されます。
では、リンクの上にマウスを載せたときの文字色はどうなるでしょうか?

1行目に記述したhover疑似クラスで文字色に「orange」を指定していますから、一見するとオレンジ色になりそうですが、実は違います。濃青色のまま変化しません。

にししふぁくとりー

1行目に指定したhover疑似クラスが効いていないように見えるのは、「後に指定されたものが採用される」という規則があるからです。最初に確かに「a:hover」の条件に合致しますが、その直後に「a:link」にも該当するため、2行目の方が採用されて文字色は濃青色になる(濃青色のままになる)のです。

したがって、望み通りに表示させようと思うと、「a:hover」と「a:link」の記述順序は逆にしなければなりません。

a:link { color: darkblue; }
a:hover { color: orange; }

上記のようにhover疑似クラスを後に記述しておけば、リンクの上にマウスポインタが載った際には、意図通りにリンクテキストがオレンジ色に変わります。

にししふぁくとりー

リンクの配色を指定する機会はたくさんあるでしょうから、テンプレート的に :link → :visited → :hover の順に記述する、と固定してしまえば良いでしょう。
なお、同様の問題はfocus疑似クラスやactive疑似クラスでも起きますので、意図通りの装飾にならない場合にはスタイルシートの記述順に気をつけてみて下さい。

※疑似クラスのほかにclass名やid名を付加した上で装飾を指定している場合には、さらに「スタイルが適用される優先順位」の問題も絡むため、上記とは異なる結果になることがあります。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---