文字のロールオーバーについて教えてください。

質問

HPを作製しているのですが、リンクを張った文字にロールオーバーをつけたくて、スタイルシートで、やってみたのですが、そうすると画像を張ったリンクにマウスを持ってきても周りの色が四角に、指定した色に変わってしまいます。（画像は、楕円形のボタンです）

文字のみロールオーバーをつけたい場合はどうしたらいいのか教えてください。

回答No.1

stonewell · ベストアンサー

クラスを使う方法があります。

例：文字のリンクのみ赤くする

スタイルの記述部分(.redの部分がクラス)

A:hover.red { color: red; }

リンクのタグ

文字のリンク(上で記述したクラスを指定する)
<a href="xxx.html" class=red>redクラス</a>

画像のリンク(クラスをつけない)
<a href="xxx.html"><img src="xxx.gif"></a>

このようにすると、文字のリンクのみ赤くなります。

参考URL：

http://tohoho.wakusei.ne.jp/css/basic.htm#Class

お礼

ありがとうございました。HPとても参考になりました。
同じようにやってみたら文字だけ色が変わりました！
助かりました。

回答No.2

the845t

a:hover {color:red;}
a:hover img {color:blue;}

こういう方法もあります。
redの方はマウスを重ねた際、変える色。
blueの方は規定のリンクの色。
それぞれ使用する色に変更してみて試してみてください。

というかそもそも画像のふちに色をつける必要が無いのであれば、border="0"をimgタグに加えましょう。

お礼

ありがとうございました。
やってみたら出来ました。