- ベストアンサー
CSSのrollOverで
http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi 上記リンクHPの投稿一覧部分のように、マウスを重ねるとその列の色が変わるようにしたいのですが、上手く出来ずにおります。 htmlにテーブルを作りcssでテーブルに色をつけて tr:hover{ としてみたりとやってみたのですが、出来ませんでした（テーブルに色をつけなければ出来るのですが）。 リンクHPの投稿一覧部分のように、マウスを重ねるとその列の色が変わるようにするにはどのように行えばよいのでしょうか？ ご指導をいただきたく思います。 よろしくお願いします。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (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でひっかがるのですね、、、マイクロソフトはいったい、、、）