リンク色の変更

<td>内でマウスオーバー時に背景色、文字色が変わるものを作っています。

背景色は普通にthis.style.background.colorで変更できますが、
中の文字はリンクなのでstyle.colorでは変更できません。
文字の上ではなく、セルにマウスが入った時点でリンク色を変えたいのでスタイルシートではNGでした。

javascriptで１部のリンク色だけを変えたい場合はどうしたらいいんでしょう？？

リンクを外して<td>内クリック時にリンクすることもできますが、ステータスバーに何も表示されないのは嫌なのでなしてす。

説明がうまくできていないと思うので不明な部分は補足します。

だれか分かる方いらっしゃいましたらよろしくお願いします。

No.2 ベストアンサー 回答者： steel_gray 回答日時： 2007/10/17 19:51

条件の詳細がわからないのですが、文字に重ならなくてもセルかかっただけで機能するリンクはスタイルシートだけでも出来ると思いますよ。

td a {
display:block;//これが重要
width:～;//お好みのサイズ、またはセルにあわせるなら100%で。
height:～;//同上
}
td a:hover{
background:～;
color:～;
}

http://allabout.co.jp/internet/hpcreate/closeup/ …
↑参考

この回答へのお礼

まさに、これです。

これがしたいんです。
スタイルシートでできるなんてびっくりです。

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

お礼日時：2007/10/18 09:26

No.1 回答者： is_may 回答日時： 2007/10/17 18:25

<td>の中にある<a>を個別で呼び出すために、オンマウスした時に文字色を変えたいリンクには全てIDを振る必要があります。

プログラムを実行する<td>タグに

onmouseover="xChangeColor(this,[<a>のID])" onmouseout="xResotreColor()"

を追加します。xChangeColorで色を変更し、xRestoreColorで元に戻します。
xChangeColorの第二引数に文字色を変更するリンクのIDを代入します。以下のサンプルではIDが数字になっているので必要ありませんが、IDに数字以外の文字が含まれる場合は、

onmouseover="xChangeColor(this,'apple')"

このようにシングルクォーテーションで囲う必要があります。
xRestoreColorには引数はありません。xChangeColorで最後に色を変更したテーブルタグとリンクタグへのアクセス名を一時的に保存しているためです。

<script language="javascript" type="text/javascript"><!--
function xChangeColor(table,id){
restable=table;
resid=id;
table.style.backgroundColor="#ff8800";
document.getElementById(id).style.color="#00ff00";
}
function xResotreColor(){
restable.style.backgroundColor="#ffffff";
document.getElementById(resid).style.color="#0000ff";
}
//-->
</script>
<table border="1" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td onmouseover="xChangeColor(this,1)" onmouseout="xResotreColor()"><a href="#" id="1">りんご</a></td>
<td onmouseover="xChangeColor(this,2)" onmouseout="xResotreColor()"><a href="#" id="2">みかん</a></td>
</tr>
<tr>
<td onmouseover="xChangeColor(this,3)" onmouseout="xResotreColor()"><a href="#" id="3">バナナ</a></td>
<td onmouseover="xChangeColor(this,4)" onmouseout="xResotreColor()"><a href="#" id="4">メロン</a></td>
</tr>
</tbody>
</table>

この回答へのお礼

回答ありがとうございます！
あんなにわかりにくい説明なのに丁寧に答えていただいて。。。

やはりIDを設定するんですね。
ソースまで書いていただいてありがとうございます！
参考にしたいとおもいます。

お礼日時：2007/10/18 09:25