HOME> Tips > <a>のhoverスタイル

<a>のhoverスタイル

　よくリンクにマウスを重ねると文字色や背景色が変わったりすることがあります。これはごく簡単なスタイルシートを書くことで実現できます。たとえば、

<style type="text/css">
a:hover{
    color: lime;
}
</style>

このようにするとリンクの上にマウスを重ねたときに文字色をライム色にすることができます。

　ここまでは誰でもやっていますし、一見問題がないように見えます。 しかし、<a>はリンクの始点だけではなく、終点にも使用されます。 具体的には<a href="#download">...</a>だけではなく<a name="download">...</a>にもスタイルが適用されています。 リンクの終点は通常のテキストのはずなのにマウスを重ねたときだけ色が変わる。クリックしても何も起こらない。 たいていの作成者にとってこの動作はユーザーインターフェース的に問題があるので意図したものではないと思います。

　では、リンクの始点だけにhoverのスタイルを適用する方法はというと、次のようになります。

<style type="text/css">
a:hover[href]{
    color: lime;
}
</style>

　全然難しいことではなく、CSSの範囲内で実現できます。 a:hover[href]の部分をセレクタと呼びますが、[ ]に属性名を指定するとその属性が指定された要素に限定してスタイルを指定することができます。 詳しくはCSS2 Specification(日本語)、CSS2 Specification(英語)のセレクタを参照してください。 セレクタを使いこなすともっと複雑なこともできます。

(2004.03.21追記)・・・IEのバグか仕様でこの書き方が使えないようです。

<style type="text/css">
a:hover{
	color: lime;
}
a:hover[name]{
	color: inherit;
}
</style>

　こう書けばname属性があるときは変化が起こりません。 name属性とhref属性を同時に指定したときも変わらないのでさらに追加してhref属性が存在するときは変化が起こるようにします。

a:hover[name][href]{
	color: lime;
}

　これでIEでもMozillaでもOKになりました。 CSS2的にも正しい書き方です。アクセシビリティ的にはbackground-colorプロパティも同時に指定したほうが良いでしょう。(追記ここまで)

　蛇足ですが、リンクの終点は <h3><a name="download"></a>...</h3>は間違いで、 <h3><a name="download">...</a></h3>のように使うのが正しい書き方です。

　というわけで、デザイナー、Wiki開発者の皆さん、[href] [name], [name][href]を使いましょう(^_^;)

HOME> Tips > <a>のhoverスタイル

by Takayuki, 2003-2009.