こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

a:hoverについて

リンク毎に「a:hover」のスタイルを変更したいのですが、
a:link { text-decoration: none; color: blue; }
a:visited { text-decoration: none; color: blue; }
a:hover { text-decoration: underline; color: red; }
通常は↑のスタイルで、

a[aaa]:hover { text-decoration: underline; color: blue; }
nameを指定したリンクの場合は↑にしたい。

<a name="aaa" href="~">リンク</a>

このような感じだと、上のリンクにカーソルを持っていっても青に変わってくれません。
どーすれば良いでしょうか?

投稿日時 - 2011-02-26 14:10:51

QNo.6551706

dyo

困ってます

質問者が選んだベストアンサー

<a name="aaa" href="~">リンク</a>※1
ということは、リンクでありながらかつ、リンクの終点でもあるということですよね。
 nameはidと同じく一意なのでclassは使わない
すなわち
<a id="aaa" href="~">リンク</a>
がHTML4以降の書き方、後方互換のため
<a id="aaa" name="aaa" href="~">リンク</a>
と書くことが多い、XHTMLでは
<a id="aaa" href="~">リンク</a>※2

※1の場合は
a[name=aaa]:hover {color: blue; }
でよい。""は書いてはだめ、またtext-decoration: underline;はすでに書かれているので不要。
※2なら
#aaa:hover{}

 ただ、ユーザビリティからリンクのある場所にはunderlineはつけておくほうがよい。読者にリンクがあるところを示すべき。

 ただし、この属性セレクタはIE6以前の古いブラウザは対応していないので、
<a href="[URL]" name="aaa" id="aaa">テスト</a>
に対して、
#aaa:hover{}
がベストかな??

投稿日時 - 2011-03-02 23:44:26

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.3

>他に方法はありますか?

クラスは…使っちゃ駄目……なの?

投稿日時 - 2011-02-27 01:46:39

ANo.2

目的がわかりませんし、これを使う賛否は別として、

a[name="aaa"]:hover { text-decoration: underline; color: blue; }


nameじゃなきゃダメなのかな?・・・

投稿日時 - 2011-02-26 15:16:17

補足

>nameじゃなきゃダメなのかな?・・・
他に方法はありますか?

投稿日時 - 2011-02-26 15:31:33

ANo.1

http://www.google.com/search?hl=ja&q=css%20%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF

[aaa] だとaaaという属性指定になるから違うよ
nameという属性だから[name]
で それに値が有るから・・・

投稿日時 - 2011-02-26 14:18:21