人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●質問者: moks
●カテゴリ:コンピュータ ウェブ制作
✍キーワード::active :hover :link :visited スタイルシート
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● blanccasse
●100ポイント ベストアンサー

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


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

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

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

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

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

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

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

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

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

◎質問者からの返答

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


2 ● gessan
●10ポイント

classを使って分別する。

HTMLでは

テキスト1

テキスト2

CSSでは

a:hover.red

{

color:red

}

a:hover.blue

{

color:blue

}

◎質問者からの返答

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


3 ● いのくに
●50ポイント
<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>
◎質問者からの返答

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


4 ● aside
●50ポイント

サンプルソース

<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>
◎質問者からの返答

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


5 ● sjy
●50ポイント

以下のような感じでいかがでしょうか。まだ私の経験が浅いもので、スマートな答えにはなっていないかもしれませんが・・・。動作確認は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>

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ