- ベストアンサー
CSSのrollOverで
http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi 上記リンクHPの投稿一覧部分のように、マウスを重ねるとその列の色が変わるようにしたいのですが、上手く出来ずにおります。 htmlにテーブルを作りcssでテーブルに色をつけて tr:hover{ としてみたりとやってみたのですが、出来ませんでした（テーブルに色をつけなければ出来るのですが）。 リンクHPの投稿一覧部分のように、マウスを重ねるとその列の色が変わるようにするにはどのように行えばよいのでしょうか？ ご指導をいただきたく思います。 よろしくお願いします。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
参考サイトの構成については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様、横やりでしたらお許し下さい。）
その他の回答 (3)
- turbo27
- ベストアンサー率40% (166/414)
見本とされた参照サイトより必要な部分だけ抜き出すとこうなります。 以下のソース(ちょっと長いですが） --------------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ファイルの場所をみて、そのパスをアドレスバーに入れて調べていただくと分かるかと思います。
お礼
書き込みありがとうございます。 一応自分でも見てみてはいたのですが、TrActive辺まではなんとかたどり付けたのですが、そこからわからなくなっておりました。ご回答を参考にもう一度見てみたいと思います。以前参考書に意味もわからず（ほとんど説明もなく）onmouseoverのjavaが出て来て書き足した事がありましが、それを思い出しました。結局Javaのジャもわかっていないので、全く応用がきかず思いつきもしなかったという感じのようです。javaにもいずれ取り組んでみようとは思っていましたが、少しでも早い方が良い気がして来ました。 改めてサイトを確認してみます。 書き込みいただきありがとうございました。
- tenderfeel
- ベストアンサー率56% (215/379)
hoverはIEだとaしか対応してません。 なのでtrとかでやりたい場合はjavascirptを使うのが多いです。 <style type="text/css"> tr.hover { background-color: black; color: white; cursor:pointer; } </style> <script type="text/javascript"> window.onload = function() { if (document.getElementsByTagName) { var className = 'hover'; var t = document.getElementById("Table"); var Rows = t.getElementsByTagName("tr"); for (var i = 0; i < Rows.length; i++) { if (Rows[i].className) { Rows[i].BaseName = Rows[i].className; Rows[i].onmouseover = function(){this.className = className;} Rows[i].onmouseout = function(){this.className = this.BaseName;} } } } } //]]> </script> <table id="ListTable"> <tr class="row"> <th>Sample1</th><td>sample text</td> </tr> <tr class="row"> <th>Sample2</th><td>sample text</td> </tr> <tr class="row"> <th>Sample3</th><td>sample text</td> </tr> </table>
補足
書き込みいただきありがとうございます。 ご回答いただいたのですが、まだJavaを扱った事がないもので、この方法に対応出来なそうです。せっかく書き込みをいただいたのですが残念です。 できれば１つお聞かせお願いしたいのですが、リンク先はJavaにより実現されてるものでしょうか？一応自分でもページソースを見てみたりしたのですが、判断できなかったもので、もし手間にならない程度でしたらリンク先がJavaのものであるかを教えていただけないでしょうか。もし手間になるようでしたらスルーしてください。 もしよろしければまた書き込みをいただけたらと思います。 よろしくお願いします。
- tunedriver
- ベストアンサー率23% (3/13)
作成されたテーブルの<td>などの中に<a href="#">***</a>が入る事になると思います。 その<a>タグをcssでブロック化してその<a>タグの上をマウスがオーバーした時にロールオーバーで背景画像(または背景色)が変わるようにすればできますよ。 <table> <tr> <td><a href="#">***</a></td> </tr> </table> だとしたら a { display: block; width: ***%; height: auto; background: #FFFFFF; } a:hover { background: #CCCCCC; } widthやらheightは任意で こんな感じで書くと、マウスオーバーが反応する範囲は<a>タグのテキスト部分では無く、指定した幅、高さの範囲全てになります～ 画面サイズに合わせて幅や高さを変えたいであれば相対単位で指定してくださいね～ 参考になれば幸いです
補足
書き込みありがとうございます。 すみません、やっては見たのですが上手く出来ませんでした。リンク先のような、複数のtdなどにまたがったかたちでマウスオーバーで反応させたいのですが、やり方がわるいのかtdなど個別では出来ても、一行すべてをリンク先のように反応させる事がでないでおります。 他の方の回答でjavaでの方法の解説をいただいておりますが、Javaはまだ扱った事もないもので、もしCSSで出来るのであればCSSでやりたいと思っております。IE対応もとりあえず後回しにして、Firefoxなどで試しています。 もしよろしければ補足をいただけないでしょうか。 お時間ありましたら、書き込みをいただけたらと思います。 よろしくお願いします。
お礼
書き込みありがとうございました。 できました。trをクラス分けしてそこで色指定もしておけば、hr:hoverでのロールオーバーができるのですね。テーブルの列幅指定から始めてしまったので、CSSでtdなどへ色指定を行ってしまっていた事が問題であったみたいです。まだまだ修行不足で頭が回りませんでした。 大変勉強になりました。 ありがとうございました。 （それにしてもまたもIEでひっかがるのですね、、、マイクロソフトはいったい、、、）