マウスを乗せたときにセルの色を変える

解決済

質問者：hikariko
質問日時：2002/03/04 13:28
回答数：3件

マウスを乗せたときにセルの色を変えるにはどのようにすればいいのでしょうか？
セルの中には文字を入れています。セルの背景色のみを変えたいです。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： steelgreen
回答日時：2002/03/04 16:19

セルということはテーブルを使った場合だと思います。

それぞれの<td>の中に

onMouseout="this.style.backgroundColor='#FFFFFF'"
onMouseover="this.style.backgroundColor='#FF0000'"

の二つを記述します。#******は指定する色です。
onMouseoutを記述しないとマウスポインターが外れてもそのまま
onMouseoverで指定した色のままになってしまうために記述します。

onMouseoutはマウスポインターがそのセルから外れたときにの背景色の色を
onMouseoverはマウスポインターがそのセルの上にきたときの背景色を
それぞれ示しています。

この記述方法でしたら
IE5以上（4以下はわかりません。）
Netscape6.2
Opera6.01（日本語版）
でも動作しますよ。

記述例を書いてみましたので参考にしてみてください。
<TABLE CELLPADDING="0" CELLSPACING="0" BGCOLOR="parent" BORDER="0">
<TR BGCOLOR="#FFFFFF">
<TD onMouseout="this.style.backgroundColor='#FFFFFF'" onMouseover="this.style.backgroundColor='#FF0000'">セル１</TD>
<TD onMouseout="this.style.backgroundColor='#FFFFFF'" onMouseover="this.style.backgroundColor='#FF0000'">セル２</TD>
<TD onMouseout="this.style.backgroundColor='#FFFFFF'" onMouseover="this.style.backgroundColor='#FF0000'">セル３</TD>
<TD onMouseout="this.style.backgroundColor='#FFFFFF'" onMouseover="this.style.backgroundColor='#FF0000'">セル４</TD>
</TR>
</TABLE>

ちなみに<tr>に記述すると横一列のセルすべてに適応されます。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！！
まさしく、これがやりたかったことです。
勉強になりました。

通報する

お礼日時：2002/03/04 16:44

No.2

回答者： novaakira
回答日時：2002/03/04 16:06

スタイルシートを利用して変えることができます。

<head></head>の中にいれてください
-------------------------------------
<html>
<head>
<title>タイトル</title>
<style type="text/css">
a:link {color: #406f8c;}
a:visited {color: #104c6d;}
a:active {color: #40ee40;}
a:hover {background-color:#ff00ff;}
</style>

a:link,a:visited,a:activeはつけなくてもいいです。
必要なのは、a:hoverの設定で背景色を変えることができます。