onMouseoverを利用して、セル内の背景色と文字を反転させたい

テーブルで各セルに別ページへのリンクのリストを作成しています。
onMouseover と onMouseout でマウスが上に来た時に色を変えるようにしたいのですが、背景色の変更は出来ます。
onMouseover="this.style.backgroundColor='#3a5b88'" のようにして。

問題は文字色でして、こちらの変え方が分かりません。スタイルシートでも設定しているので、文字の上にポインタが来ればスタイルシートの指定通りに色を変えられますが、タイトルにも書いたように、onMouseover時には背景色と文字色を反転させるように考えているので、セル内の文字から離れた位置にポインタが来た時には背景色が文字色に変わる（つまり文字色はそのままなので同じ色になる）ので、文字が消えてしまうのです。

なにか良い方法がありましたら教えてください。

No.1 回答者： noname#12124 回答日時： 2005/01/08 17:41

まず、以下をヘッダに。

<script type="text/javascript">
<!--
var color1 = "#FFFFFF" ;
var color2 = "#000000" ;

function changecolor(id,mouse)
{
if(mouse=="on")
{
document.getElementById(id).style.color=color1;
document.getElementById(id).style.backgroundColor=color2;
}

if(mouse=="off")
{
document.getElementById(id).style.color=color2;
document.getElementById(id).style.backgroundColor=color1;
}
}
//-->
</script>
で、次を色を変えたいところに。
（divなどはなんでも。）

<div id="style1" onmouseover="changecolor('style1','on')" onmouseout="changecolor('style1','off')">Sample1</div>

こんな感じでどうでしょうか？
（私もまだ未熟なので。）

この回答へのお礼

ありがとうございます。なかなかスマートなやり方ですね。上手く行きました。応用も出来ますね。
ただ、文字色が上手く行かない原因はリンクを設定していたため、その色が固定されて変わらないためでした。もっと早くに気づくべきでした。

お礼日時：2005/01/09 11:45

No.2 回答者： BLUEPIXY 回答日時： 2005/01/08 18:31

onMouseover="this.style.backgroundColor='#3a5b88';this.style.color='#FFFFFF'"

みたいな感じいいんじゃないでしょうか

この回答へのお礼

ありがとうございます。そうなんです、この単純な方法で出来るんですよ。やってみてはいたんですが、上手く行かなかったんです。その原因は 1 の方へも書いたのですがリンク設定で文字色が固定されて変わらないためでした。単純な事に気づかないでいました。

お礼日時：2005/01/09 11:48

No.3 ベストアンサー 回答者： steel_gray 回答日時： 2005/01/08 23:53

Javascriptでやるなら

onMouseover="this.style.backgroundColor='#3a5b88';this.getElementsByTagName('a')[0].style.color='#xxxxxx'"
onMouseout="this.style.backgroundColor='';this.getElementsByTagName('a')[0].style.color=''"
こんな感じでどうでしょう。


ただ、CSSだけで
td a{
display:block;
text-decoration:none;
padding:0.5em;
}
td a:hover{
color:#xxxxxx;
background-color:#xxxxxx;
}

って感じでやったほうが好み。（デザインの条件によっては無理があるけど）

この回答への補足

よく見たら若干おかしなところがあったので、よろしければアドバイスください。

CSSは以下のように書きました。

td a.list{
display:block;
text-decoration:none;
padding:5 2 0 5;
width:100%;
height:100%;
}
td a.list:visited{
text-decoration:none;
color:#3a5b88;
}
td a.list:hover{
color:#ffffff;
background-color:#3a5b88;
text-decoration:none;
}
td a.list:active{
color:#ffcc00;
text-decoration:none;
}

　これでリンクを onmousedown の状況にすると（リンクをactiveにするわけですね）、文字色は上記の指定通り #ffcc00 になるのですが、リンク対象のセル枠内側に小さな点のラインがセルを囲む形で表示されてしまいます。これは？　うっとうしいので消したいのですが、どうすればいいのでしょうか？

補足日時：2005/01/09 14:24

この回答へのお礼

ありがとうございます。この方法でも上手くできますね。CSSでは上手くできなかったので、JavaScriptでやるしかないと思っていましたが、回答を参考にして、もう一度CSSで書き直してみたらキチンと思い通りに表示させることが出来ました。この方がスッキリしていていいですね。

お礼日時：2005/01/09 11:52