質問
質問者：goo2408 CSSのrollOverで
困り度：
  • 暇なときにでも
 ​http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi​
上記リンクHPの投稿一覧部分のように、マウスを重ねるとその列の色が変わるようにしたいのですが、上手く出来ずにおります。
htmlにテーブルを作りcssでテーブルに色をつけて
tr:hover{
としてみたりとやってみたのですが、出来ませんでした（テーブルに色をつけなければ出来るのですが）。

リンクHPの投稿一覧部分のように、マウスを重ねるとその列の色が変わるようにするにはどのように行えばよいのでしょうか？
ご指導をいただきたく思います。
よろしくお願いします。
質問投稿日時：08/03/13 14:53
質問番号：3859139
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答20pt
回答者：abril 参考サイトの構成についてはANo.2/3の回答者様が迅速なお答えの通りですし、ANo.1の補足のコメントに関してもANo.1の回答者様が的確なレスを返して下さると思いますが、個人的に興味があったのでちょっと参加させて下さい。

> リンク先のような、複数のtdなどにまたがったかたちでマウスオーバーで反応させたいのですが、やり方がわるいのかtdなど個別では出来ても、一行すべてをリンク先のように反応させる事がでないでおります。
他の方の回答でjavaでの方法の解説をいただいておりますが、Javaはまだ扱った事もないもので、もしCSSで出来るのであればCSSでやりたいと思っております。IE対応もとりあえず後回しにして、Firefoxなどで試しています。

もしIE6.0で実装されなくても良いのであれば、CSSだけでも参照先の様な見た目は実現可能ですよ。
下記は検証済みです。

【HTML】
----------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "​http://www.w3.org/TR/html4/strict.dtd">​
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<link href="./css/hogehoge.css" type="text/css" rel="stylesheet" media="all">
</head>

<body>

<table cellspacing="0" cellpadding="0" border="0" summary="サンプル">
<tr class="cl1">
<th>No.1</th><td>データ1-1</td><td>データ1-2</td>
</tr>
<tr class="cl2">
<th>No.2</th><td>データ2-1</td><td>データ2-2</td>
</tr>
<tr class="cl1">
<th>No.3</th><td>データ3-1</td><td>データ3-2</td>
</tr>
</table>

</body>
</html>
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
body {
font-size: 12px;
background: #ffffff;
padding: 0;
margin: 1em;
}

table {
width: 400px;
border-collapse: collapse;
}
th, td {
padding: 5px;
border: solid 1px #000000;
}
tr.cl1 {
background: #cccccc;
}
tr.cl2 {
background: #ffffcc;
}
tr:hover {
background: #ffcccc;
}
----------------------------------------------------------------------

これで初期状態の行ごとの背景色は<tr class="cl1">の箇所は#cccccc、<tr class="cl2">の箇所は#ffffcc、両者を問わず、行のどこかにマウスオーバーがされた場合は#ffcccc、という状態になります。
Windows XP上でFirefox2.0、Opera9.25、IE7.0、Netscape7.1では確認済みです。Mac OSXは未確認ですが、おそらくSafariとかのモダン・ブラウザもa以外の:hoverは有効だったかと…（未確認の為、断言は避けます）。

（ANo.1様、横やりでしたらお許し下さい。）
種類：回答
どんな人：専門家
自信：参考意見
回答日時：08/03/13 20:05
回答番号：No.4
この回答へのお礼書き込みありがとうございました。

できました。trをクラス分けしてそこで色指定もしておけば、hr:hoverでのロールオーバーができるのですね。テーブルの列幅指定から始めてしまったので、CSSでtdなどへ色指定を行ってしまっていた事が問題であったみたいです。まだまだ修行不足で頭が回りませんでした。

大変勉強になりました。
ありがとうございました。


（それにしてもまたもIEでひっかがるのですね、、、マイクロソフトはいったい、、、）

回答

良回答10pt
回答者：turbo27 見本とされた参照サイトより必要な部分だけ抜き出すとこうなります。

以下のソース(ちょっと長いですが）
--------------htmlファイル　test.html--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"​http://www.w3.org/TR/html4/loose.dtd">​
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>背景色テスト</title>
<script type="text/javascript" src="jstest.js"></script>
<link href="csstest.css" rel="stylesheet" type="text/css">
</head>

<body onLoad="TrColor()">
<div id="ListTable">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr class="TdBgc1">
<td>1行目1列</td>
<td>1行目2列</td>
<td>1行目3列</td>
</tr>
<tr class="TdBgc1">
<td>2行目1列</td>
<td>2行目2列</td>
<td>2行目3列</td>
</tr>
<tr class="TdBgc1">
<td>3行目1列</td>
<td>3行目2列</td>
<td>3行目3列</td>
</tr>
</table>
</div>
</body>
</html>
--------------htmlファイル終わり--------------------

--------------jsファイル　jstest.js---------
function TrColor(){
if(document.getElementById){
var ThreList = document.getElementById("ListTable");
var Rows = ThreList.getElementsByTagName("tr");
for(var i = 0; i < Rows.length; i++){
if (Rows[i].className) {
Rows[i].BaseName = Rows[i].className;
Rows[i].onmouseover = OverColor;
Rows[i].onmouseout = OutColor;
}
}
}
}

function OverColor() {
this.className = "TrActive";
}

function OutColor() {
this.className = this.BaseName;
}
--------------jsファイル終わり--------------------

--------------cssファイル csstest.css-------
/* testファイルにfloatは無いのでclearは必要ないですがそのまま残してあります */
#ListTable {
clear: both;
margin: 10px 25px 10px 25px;
}
.TrActive {
background-color: #f1f1f1;
}
.TdBgc1 {
background-color: #f7f7f7;
}
--------------jsファイル終わり--------------------
をそのまま---線内を「test.html」「jstest.js」「csstest.css」と保存してプレビューしていただけると、マウスオーバー時にtr内が色が変わると思います。
id「ListTable」の中のtrに対して、javascriptでonmouseover時とonmouseout時の背景色を切り替えてます。
id「ListTable」で囲ってないテーブルに対しては背景色は変えません。


見本サイトのソースを見ると、<div id="ListTable">の中に<div id="ListTableIn">を指定して、
cssファイル内では
/* スレッドリスト */
#ListTable {
clear: both;
margin: 10px 25px 10px 25px;
}
#ListTableIn {
width: 100%;
}
#ListTableIn table {
width: 100%;
}
#ListTableIn th {
padding: 3px;
background-color: #ffd37d;
white-space: nowrap;
}
#ListTableIn td {
padding: 3px;
}
などといろいろ指定してます。が、背景色の切り替えに関わっているのは上記のソースのみです。
javascriptが読めなくても、なんとなーくonmouseoverした時にOverColorと言うヤツがCSSのクラス名をTrActiveに変えてるなというのは分かると思います。でCSSのクラスTrActiveではtrアクティブ時の背景色#f1f1f1を指定してます。

自分で見たほうがいいと思いますので、見本サイトのソースからjsファイルとcssファイルの場所をみて、そのパスをアドレスバーに入れて調べていただくと分かるかと思います。
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/13 19:40
回答番号：No.3
この回答へのお礼書き込みありがとうございます。

一応自分でも見てみてはいたのですが、TrActive辺まではなんとかたどり付けたのですが、そこからわからなくなっておりました。ご回答を参考にもう一度見てみたいと思います。以前参考書に意味もわからず（ほとんど説明もなく）onmouseoverのjavaが出て来て書き足した事がありましが、それを思い出しました。結局Javaのジャもわかっていないので、全く応用がきかず思いつきもしなかったという感じのようです。javaにもいずれ取り組んでみようとは思っていましたが、少しでも早い方が良い気がして来ました。
改めてサイトを確認してみます。
書き込みいただきありがとうございました。
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ