リンクの下線や色の指定を特定のところだけ設定したい

質問

HTMLページ内で、いくつもあるリンクの中で、特定の箇所だけ
下線を付けない
onMouseの時だけ下線を付ける
色をデフォルト以外の色を付ける
ようにしたいのですが、どのようにしたらいいでしょうか。

たとえばこの下はむちゃくちゃですが、
.link { font-size:12pt; color:#BF0000; font-weight: bold; text-decoration:none; a:link, a:visited { text-decoration: none; } a:hover { text-decoration: underline; }}

こんな感じでスタイルシートに書いて
<a href="xxxx.html"><span class="link">click</span></a>
みたいな感じでも少しずつ変えながらいろいろ試してみたのですが
色やonMouse以外の時の下線なしはできたのですが、onMouse時の下線付きがうまくいきません。

どうすればよいかご存じの方ご教授ください。

回答No.1

yambejp · ベストアンサー

たとえば、アンカーの中のスパンに処理をするのを逆転するとか
アンカーにクラスを振るとかどうでしょう？

<style>
span a,a.span{
color:#BF0000;
text-decoration:none;
}
span a:hover,a.span:hover{
text-decoration:underline;
}
</style>
<span><a href="xxxx.html">click</a></span>
<a href="xxxx.html">click</a>
<a href="xxxx.html" class="span">click</a>

お礼

ありがとうございます。
スタイルシートをきちんと理解できていないので、教えて頂いたものをうまく自分のファイルの形に適応させることができないのですが・・・
別ファイルでスタイルシートを組んでいます。

common.css内
.name { font-size:14pt; color:#BF0000; text-decoration:none; }
.link:hover { text-decoretion: underline;}

HTMLファイル内
<span class="name"><a href="xxx.html" class="link">click</a></span>
も<span>と<a>を入れ替えたパターンでも試してみましたが、onMouseのときに下線が付きません。
色やフォントサイズはちゃんと付いていてonMouseでないときの下線がないところまではできています。
どこを修正すべきでしょうか。

未熟者で恐縮です。(v v;)

回答No.2

yambejp

問題が２点。

1.＃１の回答はどちらかでいい
2.タイポ（書き間違い）に注意

以上を踏まえて
<style>
a.link{ text-decoration: none;}
a.link:hover{ text-decoration: underline;}
</style>
<a href="xxx.html" class="link">click</a>

で十分。

質問者さんのまちがいはここ
＞.link:hover { text-decoretion: underline;}

decor"a"tionです

お礼

スペルミスなんてお恥ずかしい
構文に自信がないというか、かなりの未熟者なので、「動かない＝構文間違い」とばかり頭にあり、スペルチェックを怠っておりました。

で、スペルミスはなおしたのですが、依然構成が全く分かりません。
まず、CSSファイルにしたときはどう記せばいいのでしょうか。
そして、a.linkやa.link:hoverだとCSSファイルを読みに行った全てのファイル、その中の全てのリンクに適用されてしまうと思われるのですが
特定のファイルの特定のリンクにだけ適用し、あとは全く無視のデフォルト状態にしたい場合はどう書けばいいのでしょうか。

ご回答頂いた$「#1の回答はどちらかでいい」の意味も分かりません。

[薄]識でご面倒おかけしてすみません。