Mozillaのa:hoverは厳密なため注意が必要です

a:hoverでアンカーテキストの上をマウスカーソルが通過した時に動的に様々なプロパティを変更することができます。この実装がMozillaの場合、他のブラウザより厳密であるため、若干の注意が必要です。

href属性の有無が意識されるWindows版IE

次の例を見てください。

<style type="text/css">
	a{
		color:black;
		background-color:white;
	}
	a:hover{
		color:white;
		background-color:black;
	}
</style>
</head>
<body>
	<p>
		<a>href属性の無いアンカーテキスト</a><br>
		<a href="index.html">href属性のあるアンカーテキスト</a>
	</p>
</body>

href属性の無いアンカーテキスト
 href属性のあるアンカーテキスト

href属性のある場合にのみIE、Opera6ではhover疑似クラスが有効になっていますが、 href属性の無い場合にはhover疑似クラスが正しく動作していません。

しかし、Mozillaでは常に動作するようになっています。

IEではa要素の疑似クラスはhref属性がある場合にのみ作用するようですが、これは仕様通りの動作ではありません。

href属性の有無をセレクタで見分ける

これで実際に動作に差が出るのは<a name="hoge">hoge</a>といった場合です。こういった状況の改善はCSSのセレクタをうまく活用するとIEと同様のことができます。

<style type="text/css">
	a{
		color:black;
		background-color:white;
	}
	a[href]:hover{
		color:white;
		background-color:black;
	}
</style>

href属性の無いアンカーテキスト
 href属性のあるアンカーテキスト

属性セレクタを使い、href属性の存在するa要素のhover時にのみ、プロパティの書き換えを実行するというサンプルです。これでMozillaとOpera6は同様の動作になりましたが、どうやらIEで今度はhover時の動作が全く駄目になってしまいました。では発想を逆転させてみましょう。

<style type="text/css">
	a{
		color:black;
		background-color:white;
	}
	a:hover{
		color:white;
		background-color:black;
	}
	a[name]:hover{
		color:black;
		background-color:white;
	}
</style>
</head>
<body>
	<p>
		<a name="hoge">href属性の無いアンカーテキスト</a><br>
		<a href="index.html">href属性のあるアンカーテキスト</a>
	</p>
</body>

href属性の無いアンカーテキスト
 href属性のあるアンカーテキスト

これでMozilla、IE、Opera6の3ブラウザでhover疑似クラスが同じタイミングで適用されるようになりました。

他の疑似クラスを実践的な例

実際には:linkと:visitedが絡んでくるので以下のように使えば良いでしょう。

<style type="text/css">
	a,a[name]:hover{
		color:black;
		background-color:white;
	}
	a:link{
		color:black;
		background-color:white;
	}
	a:visited{
		color:red;
		background-color:white;
	}
	a:hover{
		color:white;
		background-color:black;
	}
</style>

href属性の無いアンカーテキスト
 href属性のあるアンカーテキスト(未訪問)
href属性のあるアンカーテキスト(訪問済)

更にhover時のプロパティも:linkと:visitedによって分岐させるには次のように記述します。

<style type="text/css">
	a,a[name]:hover{
		color:black;
		background-color:white;
	}
	a:link{
		color:black;
		background-color:white;
	}
	a:visited{
		color:red;
		background-color:white;
	}
	a:link:hover{
		color:white;
		background-color:black;
	}
	a:visited:hover{
		color:white;
		background-color:red;
	}
</style>

href属性の無いアンカーテキスト
 href属性のあるアンカーテキスト(未訪問)
href属性のあるアンカーテキスト(訪問済)

しかし残念ながらこれはIEとOpera6では正常に動作しないようです。

補足: Opera7

Opera7では完全に正常な動作となり、Mozillaと全く同じ挙動になっています。