OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

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

  • すぐに回答を!
  • 質問No.228877
  • 閲覧数421
  • ありがとう数2
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 17% (56/321)

マウスを乗せたときにセルの色を変えるにはどのようにすればいいのでしょうか?
セルの中には文字を入れています。セルの背景色のみを変えたいです。
よろしくお願いします。
通報する
  • 回答数3
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.3
レベル9

ベストアンサー率 50% (50/100)

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

それぞれの<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'">セル1</TD>
<TD onMouseout="this.style.backgroundColor='#FFFFFF'" onMouseover="this.style.backgroundColor='#FF0000'">セル2</TD>
<TD onMouseout="this.style.backgroundColor='#FFFFFF'" onMouseover="this.style.backgroundColor='#FF0000'">セル3</TD>
<TD onMouseout="this.style.backgroundColor='#FFFFFF'" onMouseover="this.style.backgroundColor='#FF0000'">セル4</TD>
</TR>
</TABLE>

ちなみに<tr>に記述すると横一列のセルすべてに適応されます。
お礼コメント
hikariko

お礼率 17% (56/321)

ありがとうございます!!
まさしく、これがやりたかったことです。
勉強になりました。
投稿日時 - 2002-03-04 16:44:33
-PR-
-PR-

その他の回答 (全2件)

  • 回答No.1
レベル9

ベストアンサー率 44% (12/27)

セルの色を変えたいのですよね。。。 セルが文字でいっぱいなら、こちらを試してみてはいかがでしょうか? マウスを乗せたとき、文字の背景に色をつける方法です。 ちがっていたらごめんなさい。 ...続きを読む
セルの色を変えたいのですよね。。。
セルが文字でいっぱいなら、こちらを試してみてはいかがでしょうか?
マウスを乗せたとき、文字の背景に色をつける方法です。
ちがっていたらごめんなさい。
  • 回答No.2
レベル10

ベストアンサー率 36% (60/164)

スタイルシートを利用して変えることができます。 <head></head>の中にいれてください ------------------------------------- <html> <head> <title>タイトル</title> <style type="text/css"> a ...続きを読む
スタイルシートを利用して変えることができます。
<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の設定で背景色を変えることができます。
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ