by the dreamland

夢の国の近くで暮らすエンジニア(おもにインフラ系)のブログ

hover時の文字色指定はクラス名を付けてあげること

ちょっと走り書きメモ。

 

http://www.tagindex.com/stylesheet/link/color.html

 

ここに載ってるように、リンク先表示の文字色変更はa:hover{ color:red;}などと書けば出来るらしい。

だが、CSSが複雑になって同じテーブルや<div>タグ内に複数のリンクがある場合などで、

文字色変更を細かく指定する場合は、aタグにクラス名を付けてスタイルを指定すると

よいらしい。

 

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1354405148

 

ここらへんを参考にした。

 

色指定を反映させたくない<a>要素にはclass名をつけましょう。

例:
<a href="">ロールオーバーで文字色が変わる</a>
<a href="" class="hoge">文字色を変えない</a>

a { color:#0000ff; } /* リンクの基本色 */
a:hover { color:#ff0000; } /* hover時にリンク色を赤く */
a.hoge:hover { color:#0000ff; } /* 基本色あるいは未訪問時の色を指定して変わっていないように見せる */

基本色あるいは未訪問時などの色を指定しないなら、ロールオーバーで色を変えたいリンクのほうにclassを付けるとよいです。