文字のロールオーバーの干渉

質問

いつもお世話になっています。
壁にぶち当たって、藁をもつかむ気持ちで来ました、
どなたか、分かる方がいらっしゃいましたら、ご教授ください。

内容は、同ページに色の違うロールオーバーを作らなくてはならない場合。最初のロールオーバーに干渉して、下が、上と違う色にならない、
ということです。

例：
こんにちわ←これを通常時黒、RO時に赤と設定

ごきげんよう←これを通常時オレンジ、RO時青と設定

すると、こんにちわも、ごきげんようも通常時黒、RO時赤になってしまいます。
上にあるCSSが干渉して、下のCSSが正しく起動しない。

このような現象を回避する又は、そんなタグがあったら教えてください。よろしくお願いします。

回答No.1

noname#56882 · ベストアンサー

リンクの場所をオンマウスで表示する、ということでよろしいでしょうか。

CSS記述例
a:link { color: black; }
a:visited { color: #0000a0; }/*ここは任意の色で*/
a:hover { color: red ; }
a:active { color: #ffff00; }/*ここは任意の色で*/
a.sample:link { color: orange; }
a.sample:visited { color: #0000a0; }/*ここは任意の色で*/
a.sample:hover { color: blue; }
a.sample:active { color: #ffff00; }/*ここは任意の色で*/

HTML記述例
<a href="sample1.html">通常時黒・オンマウスで赤</a>
<br><br><br>
<a href="sample2.html" class="sample">通常時オレンジ・オンマウスで青</a>

判りやすくするために<br>を3つ入れています。「リンク」でなかったら申し訳ありません。
［疑似クラスの指定］が参考になると思いますよ。
http://www.tagindex.com/stylesheet/basic/format4.html

お礼

なるほど！
<a>の中にclassを設定して、
別々のものを読み込ませればいいわけですね！？

すごく参考になりました！！
やってみます！

回答No.2

leap_day

こんにちは

ロールオーバーはjavascriptとCSSとありますがどちらでやるのでしょう？

【javascript】
<span style="color:black;" onMouseover="this.style.color='red'" onMouseout="this.style.color='black'">こんにちは</span>
<span style="color:orange;" onMouseover="this.style.color='blue'" onMouseout="this.style.color='orange'">ごきげんよう</span>

【CSS】
<style type="text/css"><!--
.br a{
color:black;
text-decoration:none;
}
.br a:hover {
color:red;
}
.ob a{
color:orange;
text-decoration:none;
}
.ob a:hover {
color:blue;
}
--></style>

<span class="br"><a href="#">こんにちは</a></span>
<span class="ob"><a href="#">ごきげんよう</a></span>

お礼

今、classをつけるやり方で成功しました。

本当に助かりました。
回答の早かった人に、20ｐ
次に回答をくれた方に10ｐ
つけさせて頂きます。

ありがとうございました。