同一ページ内でリンクテキストの色を2パターン以上設定することはできますか。

質問

リンクテキストの色設定なのですが、通常
a:link { color:#18519E; text-decoration:underline;}　などで指定することが
できますが、同一ページ内でリンクテキストの色を2パターン以上設定することはできますか。
たとえば、りんご、という文字の上ではhoverで色が赤くなるが
みかん、という文字の上ではhoverで色がオレンジになるなど。

回答No.4

cyokokichi · ベストアンサー

.menu a {color:#18519E}
.menu a:hover {color:red}
.contents a {color:#18519E}
.contents a:hover {color:orange}

<ul class="menu">
<li><a href="**">りんご1</a>
<li><a href="**">りんご2</a>
<li><a href="**">りんご3</a>
</ul>
<div class="contents">
<a href="**">みかん1</a>
<a href="**">みかん2</a>
<a href="**">みかん3</a>
</div>

回答No.3

partita

hoverで赤色にしたい部分が複数個所あるときにはクラス属性を使用します。
スタイルシートで
a:hover.color1 {color:red;}
a:hover.color2 {color:orange;}
と記述し、HTMLでは
<a class="color1">りんご</a>
<a class="color1">めがね</a>
<a class="color2">ねっと</a>
<a class="color2">てきすと</a>
…
のようにするといいです。

（a.color1:hoverだったかな・・・。どっちの記述だったか忘れてしまいました。両方試してください。）

回答No.2

sr-agent

たとえば、
<div id="ap">りんご</div>
<div id="or">みかん</div>
とタグを書き、
スタイルシートでは
#ap a:hover { color: #ff0000 }
#or a:hover { color: #ff9900 }
とすれば宜しいのではないでしょうか？

試してみてくださいね。

回答No.1

chie65536

<a href="リンク先ＵＲＬ１"><font color=好きな色１>テキスト１</font></a>
<a href="リンク先ＵＲＬ２"><font color=好きな色２>テキスト２</font></a>
<a href="リンク先ＵＲＬ３"><font color=好きな色３>テキスト３</font></a>