スタイルシートを使えば、リンクの上にマウスポインタが載ったときの装飾を指定できます。簡単に装飾を動的に変化させられるので、様々なウェブページでとてもよく使われています。具体的には、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名を付加した上で装飾を指定している場合には、さらに「スタイルが適用される優先順位」の問題も絡むため、上記とは異なる結果になることがあります。

(更新日：2016年01月06日)