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

質問

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

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

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

回答No.3

steel_gray · ベストアンサー

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

補足

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

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 になるのですが、リンク対象のセル枠内側に小さな点のラインがセルを囲む形で表示されてしまいます。これは？　うっとうしいので消したいのですが、どうすればいいのでしょうか？

回答No.2

BLUEPIXY

onMouseover="this.style.backgroundColor='#3a5b88';this.style.color='#FFFFFF'"
みたいな感じいいんじゃないでしょうか

お礼

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

回答No.1

noname#12124

まず、以下をヘッダに。
<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>

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

お礼

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