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

A 回答 (3件)

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



それぞれの<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>に記述すると横一列のセルすべてに適応されます。
    • good
    • 0
この回答へのお礼

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

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

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


<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の設定で背景色を変えることができます。
    • good
    • 0

セルの色を変えたいのですよね。

。。
セルが文字でいっぱいなら、こちらを試してみてはいかがでしょうか?
マウスを乗せたとき、文字の背景に色をつける方法です。
ちがっていたらごめんなさい。

参考URL:http://www.ladys-page.com/test76.html
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q動詞一覧・目的語一覧・補語一覧みたいな英語の詞・語ごとにずらーと並んだ

動詞一覧・目的語一覧・補語一覧みたいな英語の詞・語ごとにずらーと並んだサイトってないですか?

Aベストアンサー

動詞はともかく「目的語」とは「補語」というのは文における働きなので, そんな一覧を求めることがそもそも全く無意味.

Qマウスを乗せると、背景色が変わる仕組みは知ってるんですが・・。

マウスを乗せると背景色が変わる仕組みは、たしかa=hoverで可能でしたよね。

そこで問題が発生しました。
私は今サイトを作っていて、左側のメニューバーについてはマウスを乗せると背景色が変わるリンクにしたいんですが、普通の文章中に出てくるリンクについてはそういう仕様から外したいんです。

でもa=hoverを使うと全てのリンクに同じ設定が適合されてしまいますよね?CLASSで個別に設定しようとしても無理でした。どうすればいいですか?

そこでJAVASCRIPTというものを利用して、マウスを乗せるとその文字背景(もしくはボックス内の背景)が
変わる仕組みを実現できるはずなんですが、具体的なソースコードは知りませんかね?できればボックスごとのオンマウス時の背景色を設定できるようにしたいです

Aベストアンサー

> CLASSで個別に設定しようとしても無理でした。
無理とはとういう事でしょうか?
単に記述ミスがあっただけ?
理由わからず別の方法を探すのも勿体ないし、Javascript使った方が複雑になるしおすすめできません。

たぶん前にもサンプルを見たりしてるでしょうけど一応書いておきますので参考になれば。

<style type="text/css">
.menuBox a:hover{
background-color:red;
}
</style>


<div class="menuBox">
<a href="~">メニュー1</a>
<a href="~">メニュー2</a>
</div>
<a href="~">教えてgoo</a>

Q新着順や新着順一覧を英語で書くと??

英語で新着順ってなんて書きますか?
HPに写真を載せていて
写真を新着順一覧に表示するスペースの名前を英語にすると、なんて書けばいいんでしょうか?
新着順や新着順一覧…という感じでお願いします。

Aベストアンサー

Sort by Date (日付順)というリンクが多いですね。

順番の切り替えに latest to earliest (最新から最古へ) とその逆を書いてある場合や、上向き三角▲と下向き三角▼のボタンを使っているところもあります。

到着というのをわざわざ盛り込んでいるところは少ないですが、長くても良いならば、Sort by Date arrived か Sort by Arrival Date とも書けます。

今回に写真という語も入れようとすると、Photos sorted by date (latest to earliest) のようになって見た目は冗長になってしまいます。

Qマウスカーソルを乗せた時にテーブルの行の色を変える

マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて
以下のようにCSSとHTMLを書いてみました。
しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。

【CSS】
table tr:hover {
background:red;
}


【HTML】
<html>
<head>
<script type="text/javascript" src="./jquery-1.9.1.js"></script>
<link rel="stylesheet" href="test.css" type="text/css">
<script>
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>名前</th>
<th>金額</th>
</tr>
</thead>

<tbody>
<tr>
<td>abc</td>
<td>3000</td>
</tr>
<tr>
<td>xyz</td>
<td>100</td>
</tr>
<tr>
<td>myk</td>
<td>20000</td>
</tr>
</tbody>
</table>
</body>
</html>

マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて
以下のようにCSSとHTMLを書いてみました。
しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。

【CSS】
table tr:hover {
background:red;
}


【HTML】
<html>
<head>
<script type="text/javascript" src="./jquery-1.9.1.js"></script>
<link rel="stylesheet" href="test.css" type="text/css">
<script>
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>名前</th>
<th>金額</th>
</tr>
</thead>

<tb...続きを読む

Aベストアンサー

background-color をご使用ください
http://www.htmq.com/style/background-color.shtml

QWindows7でプログラム一覧が英語表示される

Windows7でプログラム一覧が英語表示される

Windows7 Professionalを使っています。
最近気がついたのですが
普通ならプログラム一覧で
「アクセサリ」と表示されるはずの部分が
英語で「Accessories」と表示されるようになっていました。
メニュー自体もすべて英語で
たとえば「電卓」なら「Calculator」といった具合です。

ちなみに「ゲーム」は「Games」
「既定のプログラム」は「Default Programs」となっていますが
「スタートアップ」はそのままです。

ソフト自体に不具合はないのですが
何となく気になります。
かといって
名前を一つ一つ変更するのも面倒です。
簡単に元へ戻す方法がお分かりでしたら
よろしくお願いいたします。

Aベストアンサー

詳しくは分かりませんが、C:\Users\○○\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\AccessoriesにあるはずのDesktop.iniをうまく設定すればよいと思います。ちなみに○○はユーザー名です。

Qマウスポイントを当てて背景色を変える

「マウスポイントを当てたときに文字列の背景色を変える」ことをしたいのですが、どのようなコードになりますでしょうか?また、参考になるHPあどありましたら幸いです。ご存知の方よろしくお願いします。

Aベストアンサー

先ほどの回答でこちらの解釈違いがありました。

a:hover { background-color: 色名またはRGB値; }

上のソースはハイパーリンクがはってある文字列にマウスポインタをあてたときです。なのでリンクのはってない文字列に対して同じことをするのであれば、a:hoverのところが変わってきます。

参考サイトについてですが、「スタイルシート リファレンス」と検索エンジンにかけてみればいくつかは参考になりそうなサイトが出てきます。

(一応聞いておきますが、質問から察するにWebページのソース(コード)の編集をやっているんですよね?)

Qヘンな日本語英語の一覧があるサイト

ヘンな日本語英語の一覧があるサイトなんてご存知ありませんか?
ピアース、ピーマン、ビデオデッキ、シャーペンなど、実際には使われない英語がたくさん日本で使われていたりしますが、こういうリストが載っているサイトを探しています。

ご存知の方いらっしゃいましたら教えて下さいっ!
よろしくお願いしまっす!

Aベストアンサー

洋サイトですが

参考URL:http://www.engrish.com/

Qオンマウスで異なるセルなどの背景を変える方法

(1)オンマウスで、オンしているセルではないセルの背景画像を変える方法と、
(2)オンマウスで、セルではなく、テーブル自体の背景画像を変える方法を
教えて下さい。

(1)
<table><tr>
<td>1111</td> ←このセル(文字)にオンマウスして
<td>2222</td>
<td>3333</td> ←このセルの背景を変える
</tr></table>

(2)
<table background="*****.jpg"><tr>
<td>1111</td> ←このセル(文字)にオンマウスしてテーブルの背景を変える
<td>2222</td>
<td>3333</td>
</tr></table>



こちらで使用しているブラウザはSafari2.0.4とFireFox3.0.8です。
お願いします。

Aベストアンサー

こんな感じで・・・

<script>
function change(obj){
var p=obj.parentNode;
while(p){
if(p.nodeName=="TABLE") break;
p=p.parentNode;
}
p.style.backgroundImage="url(****.jpg)";
}
</script>
<table>
<tbody>
<tr>
<td onMouseover="change(this)">1111</td>
<td>2222</td>
<td>3333</td>
</tr>
</tbody>
</table>

Q色の名前は、日本語と英語のどちらを多く使う?・・・例えば「緑」と「グリーン」

「緑」と「グリーン」、「灰色」と「グレー」・・・

色の名前を言う時、日本語と英語のどちらを多く使いますか?

例えば、
・服の色は?
・車の色は?
・携帯機器(電話・プレイヤーなど)の色は?
どちらの表現を多く使いますか?

又、その他
「このもの(種類)は、日本語(英語)で言う」
「この色は、日本語(英語)で言う」
「殆ど、日本語(英語)で言う」
といったご回答も、歓迎します!

Aベストアンサー

じゃあいきましょか。英語です。私ら。

ピンク、ローズピンク、チェリーレッド、マローピンク、チリアンパープル、コスモス、チェリーピンク、ベビーピンク、ラムプラーローズ、ラズベリー、ローズマダー、カーマイン、パーシアンローズ、プラム、ガーネット、ピアニーレッド、プリムラ、コーラル、サルビア、マゼンダ、バーミリオン、シグナルレッド、ホビーレッド、ロブスター、ケチャップ、ファイヤー、スカーレット、バーミリオンレッド、ルビー、オペラ、ブリック。ベルベット。
以上赤系統。
日本にも古来のゆかしき呼び方はありますが、この点に関しましては英語に軍配をあげます。

グレーといいましても、シルバーホワイトグレー、パールグレー、オレンジグレー、イエローグレー、ブルーグレー、ピンクグレー、フレンチグレー、ミディアムグレー、グレー、ダークグレー、カーボングレー、チャーコールグレー、…あぁしんど。
私は日本男児ですが色名は英語です。

Qaで囲った部分をマウスオ-バ-で背景色を変えたい

HTML5だとaタグで要素全体を囲えるとのことなので、
お知らせ部分に下記のようなソースをHTML5を使って作成しました。

<dl>
<a href="#">
<dt>日付</dt>
<dd>テキストテキスト</dd>
</a>
</dl>

これに対して、

dl a:hover {
background: #FF9900;
}

とCSSで設定すれば、aタグで囲っている部分が
マウスオーバーすれば背景色がオレンジになると思ったのですが、
何をどうやってもマウスオーバーしても背景色が変わってくれません。

そもそも自分の理解不足で根本的に無理なのでしょうか?
お分かりになる方いらっしゃいましたら、ご教授いただければ幸いです。
よろしくお願いいたします。

Aベストアンサー

>HTML5だとaタグで要素全体を囲えるとのことなので、
 つまみ喰いはダメです。括れますが・・・<dl>要素には<dt><dd>要素以外は含むことが出来ません。
<dl>
 <dt><a href="">日付</a><dt>
 <dd><a href="">メッセージ</a></dd>
 <dt><a href="">日付</a><dt>
 <dd><a href="">メッセージ</a>/dd>
 <dt><a href="">日付</a><dt>
 <dd>メッセージ</dd>
</dl>
と書かなければなりません。

無難なのは
<ul>
 <li>
  <dl>
   <dt><a href="">日付</a></dt>
   <dd><a href="">記事</a></dd>
  </dl>
 </li>
 <li>
  <dl>
   <dt><a href="">日付</a></dt>
   <dd><a href="">記事</a></dd>
  </dl>
 </li>
にてli:hover{}でしょうね。


人気Q&Aランキング

おすすめ情報