• HOME
  • HTML/CSS
  • FireFoxのname属性のリンクを消す(a:hoverを適用させない)方法

FireFoxのname属性のリンクを消す(a:hoverを適用させない)方法

管理人:sofu

ページ内リンクをする時、<a name="">を使用することがあると思いますが。FireFoxで見たとき、CSSのリンク指定が適用されてフォント色やフォントサイズが変わったりするということがあります。これをCSSで防ぐテクニックを紹介します。

まずはどのような症状なのか次の例を見てください。

CSS・HTML

 
a {
    color: black;
    background-color: white;
}
 
a:hover {
    color: white;
    background-color: blue;
}
 
 
<a name="anchor">name属性のテキストリンク</a>
<a href="index.html">href属性のテキストリンク</a>
 

サンプル

name属性のテキストリンク  href属性のテキストリンク

FireFoxでは「name属性のテキストリンク」「href属性のテキストリンク」の2つとも文字色・背景色が変わると思います。IEでは「href属性のテキストリンク」のみ変わります。
IEではa:hoverはhref属性がある場合にのみ作用します。ですが、これは仕様通りの動作ではありません。href属性のあるなしに関係なく全てのa要素に適用されるFireFoxの方が正しい動作なのです。

ですが、このままだとIEとFireFoxとで表示に差異があるので、name属性にはa:hoverを適用させない方法をとります。

name属性にはa:hoverを適用させない

 
a {
    color: black;
    background-color: white;
}
 
a:hover {
    color: white;
    background-color: blue;
}
 
a[name]:hover {
    color: black;
    background-color: white;
}
 

サンプル

name属性のテキストリンク  href属性のテキストリンク

属性セレクタ a[name] を使って、FireFoxだけに適用させることで、IEと同じ挙動になります。

blog comments powered by Disqus

PageTop