スタイルシートについての質問です。a:link,a:visited,a:hover,a:activeを使用してあるリンクの設定されたテキストの色を変化させています。通常ではページ内でリンクの設定されたテキストに全て同じ変化が起きます。これをテキスト毎に変える事は可能でしょうか?

例えば同一ページ内にリンクの設定されたテキストが2つあるとします。

テキスト1 →オンマウス時に赤
テキスト2 →オンマウス時に青

こういった事がやりたいのですがご存知の方居られましたら教えて頂きたいと思います。

回答の条件
  • 1人5回まで
  • 登録:2007/06/08 14:06:33
  • 終了:2007/06/10 05:13:30

ベストアンサー

id:blanccasse No.1

blanccasse回答回数142ベストアンサー獲得回数152007/06/08 14:21:45

ポイント100pt

idかclassを用いて、指定を分ければ可能ですよ。


同一ページ(ファイル)内で、

一ヶ所だけが『テキスト1→オンマウス時に赤』、

数ヶ所が『テキスト2→オンマウス時に青』、

それ以外に特定変更指定無しで良いリンクが複数ある場合、

ベースとなるaタグ指定の他に、

divやspan、liなど変更したい部分を囲むタグにidやclassを付け、

『div.class名指定 a:hover』、

『div#id名指定 a:hover』を記述するということです。

これで振り分け可能になります。

id:moks

回答ありがとうございます。分かりやすく解説して頂き助かりました。おかげさまで無事解決しました。

2007/06/10 05:11:37

その他の回答(4件)

id:blanccasse No.1

blanccasse回答回数142ベストアンサー獲得回数152007/06/08 14:21:45ここでベストアンサー

ポイント100pt

idかclassを用いて、指定を分ければ可能ですよ。


同一ページ(ファイル)内で、

一ヶ所だけが『テキスト1→オンマウス時に赤』、

数ヶ所が『テキスト2→オンマウス時に青』、

それ以外に特定変更指定無しで良いリンクが複数ある場合、

ベースとなるaタグ指定の他に、

divやspan、liなど変更したい部分を囲むタグにidやclassを付け、

『div.class名指定 a:hover』、

『div#id名指定 a:hover』を記述するということです。

これで振り分け可能になります。

id:moks

回答ありがとうございます。分かりやすく解説して頂き助かりました。おかげさまで無事解決しました。

2007/06/10 05:11:37
id:gessan No.2

gessan回答回数154ベストアンサー獲得回数12007/06/08 14:22:31

ポイント10pt

classを使って分別する。

HTMLでは

テキスト1

テキスト2

CSSでは

a:hover.red

{

color:red

}

a:hover.blue

{

color:blue

}

id:moks

回答ありがとうございます。無事解決しました。

2007/06/10 05:11:47
id:inokuni No.3

いのくに回答回数1343ベストアンサー獲得回数212007/06/08 14:35:48

ポイント50pt
<html>
<head>
<style TYPE="text/css">
<!--
a:hover.red{
	color: red;
}
a:hover.blue{
	color: blue;
}
-->
</style>
</head>
<body>
<a href="#" class="red">テキスト1 →オンマウス時に赤</a><br />
<a href="#" class="blue">テキスト2 →オンマウス時に青</a>
</body>
</html>
id:moks

回答ありがとうございます。ソースまで掲載していただき分かりやすかったです。無事解決しました。

2007/06/10 05:12:16
id:aside No.4

aside回答回数339ベストアンサー獲得回数312007/06/08 15:00:46

ポイント50pt

サンプルソース

<html>
<head>
<style type="text/css">
<!--
a:hover.test {
  color:red;
}
a:hover.test1 {
  color:green;
}
a:hover.test2 {
  color:blue;
}
-->
</style>
</head>
<body>
  <a class="test"  href="#">あ</a><br>
  <a class="test1" href="#">い</a><br>
  <a class="test2" href="#">う</a><br>
</body>
</html>
id:moks

回答ありがとうございます。ソースまで掲載していただき分かりやすかったです。無事解決しました。

2007/06/10 05:12:19
id:sjy No.5

sjy回答回数15ベストアンサー獲得回数12007/06/08 21:11:24

ポイント50pt

以下のような感じでいかがでしょうか。まだ私の経験が浅いもので、スマートな答えにはなっていないかもしれませんが・・・。動作確認はfirfox2.0.0.4でとりました。

<html>

<head>

<!--javascript部分-->

<script type="text/javascript">

function setcolor(obj,x) {

if (x == 0) { fgc = '';}

else if(x==1){ fgc = 'red';}

else if(x==2){fgc='blue';}

obj.style.color = fgc;

}

</script>

</head>

<body>

<!--CSS部分-->

<style>

a{

color:black

}

</style>

<a href="http://リンク先1" onmouseover="setcolor(this,1);" onmouseout="setcolor(this,0);">test1</a>

<br />

<a href="http://リンク先1" onmouseover="setcolor(this,2);" onmouseout="setcolor(this,0);">test2</a>

</body>

</html>

id:moks

回答ありがとうございます。ソースまで掲載していただき分かりやすかったです。無事解決しました。

2007/06/10 05:12:37

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません