- ベストアンサー
テーブルの背景をマウスオーバーで変える
お世話になります よろしくお願いします phpMyAdminをみてやってみようと思ったのですが テーブルのセルをマウスオーバーで背景の変更はできないでしょうか？ FireFoxだとうまくいくのにIEだとうまくいきません。 IEは未対応と聞いたのですが 実際phpMyAdminでは動いています。 どうやれば一緒のことができるのでしょうか？ phpMyAdminからそれっぽいソースは見つけたのですが うまくいきませんでした <style type="text/css"> /* odd table rows 1,3,5,7,... */ table tr.odd th, table tr.odd { background-color: #CCCCCC; } /* even table rows 2,4,6,8,... */ table tr.even th, table tr.even { background-color: #666666; } /* hovered table rows */ table tr.odd:hover, table tr.even:hover, table tr.odd:hover th, table tr.even:hover th, table tr.hover th, table tr.hover { background-color: #FFF000; } --> </style> <body> <table> <tr class="odd"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> <tr class="even"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> </table> 以上よろしくお願いします
- SAY_MAN
- お礼率61% (74/121)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こんにちは。 先の方がおっしゃる通り、IEでhoverが有効なのは<a>だけのようですね。 実際に table tr.odd:hover ・・・{ background-color:#FFF00; } と言う部分を全て table tr.odd a:hover ・・・{ background-color:#FFF00; } にし、TDタグの内容に全てリンクを設置したら成功しました。 リンクを貼って、CSSでリンクを普通のテキストのように装飾してごまかすか、javascriptを利用するのがよいと思います。
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
IE6以前でhoverがきくのはアンカーだけですからね。 もしどうしても必要があるならjavascriptで実現することになります
お礼
ありがとうございます。 やはりどうやってもダメでした。 Javascriptを使おうと思います。
関連するQ&A
- テーブルの行の背景色をマウスオーバー時に変えたい
<table>で表を作成しています。 表の行がマウスオーバーされたときに、その行の背景色が変わるようなページを作っています。 1行ずつなら css の tr:hover で解決しますが、表の中に rowspan を使うとうまくいきません。 下の表があったとします。現在のままだと、 ●A3セルをマウスオーバーすると、B3-2・C3-2セルの背景色が変わらない。 ●B3-2セルをマウスオーバーすると、3・A3・D3セルの背景色が変わらない。 やりたいのは、3 の行全ての背景色を変えたいのです。 ┏━┳━┳━━┳━━┳━┓ ┃行┃Ａ┃ Ｂ ┃ Ｃ ┃Ｄ┃ ┣━╋━╋━━╋━━╋━┫ ┃１┃A1┃ B1 ┃ C1 ┃D1┃ ┣━╋━╋━━╋━━╋━┫ ┃２┃A2┃ B2 ┃ C2 ┃D2┃ ┣━╋━╋━━╋━━╋━┫ ┃ ┃ ┃B3-1┃C3-1┃ ┃ ┃３┃A3┣━━╋━━┫D3┃ ┃ ┃ ┃B3-2┃C3-2┃ ┃ ┣━╋━╋━━╋━━╋━┫ ┃４┃A4┃ B4 ┃ C4 ┃D4┃ ┗━┻━┻━━┻━━┻━┛ 過去に同じような質問があったので試してみましたが、IE以外では動きませんでした。 ↓ http://okwave.jp/qa/q4793130.html CSSのみでやりたかったのですが、JavaScriptを使わないとダメでしょうか？ 色の変更は、できれば CSS で行いたいのです。 質問がわかりづらくてすみません。よろしくお願い致します。 以下サンプルです。 <!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"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>テスト</title> <style type="text/css"> <!-- table.test-01 tr { text-align:center; } table.test-01 thead th { background-color: #32a632; } table.test-01 tbody tr:hover { background-color: #ffddff; } --> </style> </head> <body> <table border="1" cellspacing="0" class="test-01"> <thead> <tr> <th>行</th> <th width="50">A</th> <th width="180">B</th> <th width="60">C</th> <th width="60">D</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>A1</td> <td>B1</td> <td>C1</td> <td>D1</td> </tr> <tr> <td>2</td> <td>A2</td> <td>B2</td> <td>C2</td> <td>D2</td> </tr> <tr> <td rowspan="2">3</td> <td rowspan="2">A3</td> <td>B3-1</td> <td>C3-1</td> <td rowspan="2">D3</td> </tr> <tr> <td>C3-2</td> <td>D3-2</td> </tr> <tr> <td>4</td> <td>A4</td> <td>B4</td> <td>C4</td> <td>D4</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- HTML
- CSSで<td>の背景色を変えたい。
下のようにTable aaa と bbbがあります。それぞれの<td>要素に マウスがHoverしたときに別々の色に変えたいのですが、これを CSS行うことは可能でしょうか？ <table class"aaa"> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> <table class"bbb"> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> <td>中には <a hrer="・・・が入っているのですが、 次のように行った場合、リンクアドレスが長くなるとうまく機能 しないようなのです。 table.aaa a:hover{ color: #FFFFFF; background-color: #FF0000; text-decoration: none; padding: 5px; } table.bbb a:hover{ color: #FFFFFF; background-color: #0000FF; text-decoration: none; padding: 5px; } よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- マウスオーバー時テーブルの背景色を変えているのですが
質問させていただきます。 テーブルを作成してマウスオーバーしている行の バックカラーを変えるプログラムを作成しています。 ですが、rowspanを使用すると、rowspanが別の行 扱いになり、バックカラーが変えられなくなってしまいました。 一緒にしたい場合どうしたら良いでしょうか。 もしわかりましたらご教授下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"><!-- firstcolor="#ffffff"; //初めの色 nextcolor="#eeeeee"; //変更後の色 function table_row(table_id){ tobj=document.getElementById(table_id).tBodies[0]; for (i=0; i<tobj.rows.length;i++){ tobj.rows[i].onmouseover=function(){this.style.backgroundColor=nextcolor}; tobj.rows[i].onmouseout=function(){this.style.backgroundColor=firstcolor}; } }// --></script> </head> <body> <table border=1 id="data_table2"> <thead> <tr> <th>No</th><th>DATA1</th><th>DATA2</th><th>DATA3</th> </tr> </thead> <tbody> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td rowspan="2"> </td><td rowspan="2"> </td><td>DATA</td><td>DATA</td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td>No</td><td>DATA</td><td>DATA</td><td>DATA</td> </tr> </tbody> </table> <script>table_row("data_table2")</script> </body> </html>
- ベストアンサー
- JavaScript
- table のバックグラウンドカラー
background-color は継承されないものだと認識しております。 ・HTML内容 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>検証</title> </head> <table border="1" background="red"> <tr> <th>授業内容</th> <th>講義</th> </tr> <tr> <td>1時間目</td> <td>国語</td> </tr> <tr> <td>2時間目</td> <td>数学</td> </tr> <tr> <td>3時間目</td> <td>英語</td> </tr> <tr> <td>4時間目</td> <td>科学</td> </tr> </table> </body> </html> ====ここまで==== ボタンを押す。⇒setStyleが動く⇒tableの背景が赤色で塗られる。動作までは分かるのですが、 td、thの部分の背景まで赤色になっています。 これは、テーブルと言う枠に、赤色が塗られ、その上にtd、thが置かれる。 結果、td、thの背景赤色は (1)「td、thのbackgroundは指定していないため、デフォルトのtransparentが有効で、 テーブルの背景赤色が透けて見えている」 (2)「td、thに、tableのbackgroundが継承されて、赤く塗りつぶされていないということ」 の考えに間違いがないか確認させて頂きたいのです。 ご教授お願いします。
- ベストアンサー
- CSS
- テーブルのスタイルを効率よく設定するには？
同じページに複数のテーブルがあり、別のスタイルを適用させたい。 ---- <style TYPE="text/css"> TABLE.A {border-style: solid; } TH.A { color: red; } TD.A { color: blue; } TABLE.B {border-style: double; } TH.B { color: green; } TD.B { color: black; } </style> <table class=A><tr><th class=A>A</th><td class=A>A</td></tr></table> <table class=B><tr><th class=B>B</th><td class=B>B</td></tr></table> --- <table><th><td>タグにclassを書けばいいのですが、もっとすっきりした方法はないでしょうか？
- ベストアンサー
- HTML
- Jqueryでのテーブル背景色設定について
お世話になります。 CSSとJavascriptどちらで投稿しようか考えたのですが、Jqueryを使用しているのでこちらに質問させていただきました。 ブラウザはIE8を使用しています。 今回 <table class="list"> <tr><th></th></tr> <tr><td></td></tr> . . . <tr><td></td><tr> </tr> このようなテーブルを作りセルの背景色一行ごとに変えたいと思いJqueryで $(function(){ $('table.list tr:even').addClass("linecolor"); }); というスクリプトを作ったのですが反映されません。 CSSは .linecolor{ background#FFFFC4;} としてます。 原因を探ったのですが、いくつかのサイトを見てもこの書き方で問題ないように思います。 試験的にロジックを替えスクリプトの"tr"を"td"と書き換えるとスタイルが適応され、 <tr> => <tr class="linecolor>"としてもスタイルが適応されませんでした。 このことから個人的な結論としてはIE８では<tr>指定でスタイル等を適応させることができないのではないかと思いました。 本当に<tｒ>にスタイルを適応させることはできないのでしょうか。 また、Jqueryを用いた対処方法があれば教えていただきたいです。 お手数ですが、アドバイスをお願いいたします。
- ベストアンサー
- JavaScript
- マウスカーソルを乗せた時にテーブルの行の色を変える
マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて 以下のように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
- CSSについて教えて下さい
CSSについて教えて下さい。 ↓下記はどのような意味になりますでしょうか。 .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: #550055; color: #eeeeee; }
- ベストアンサー
- CSS
- tableヘッダーの縦書き
Bootstarapを利用しているのですが、Tableのヘッダー部を 縦書きにするにはどのようにすれば良いでしょうか？ <h2>Bordered Table</h2> <div class="table-responsive"> <table class="table table-bordered table-hover"> <thead> <tr> <th>Page</th> <th>Visits</th> <th>% New Visits</th> <th>Revenue</th> </tr> </thead> <tbody> <tr> <td>/index.html</td> <td>1265</td> <td>32.3%</td> <td>$321.33</td> </tr> <tr> <td>/about.html</td> <td>261</td> <td>33.3%</td> <td>$234.12</td> </tr> <tr> <td>/sales.html</td> <td>665</td> <td>21.3%</td> <td>$16.34</td> </tr> <tr> <td>/blog.html</td> <td>9516</td> <td>89.3%</td> <td>$1644.43</td> </tr> <tr> <td>/404.html</td> <td>23</td> <td>34.3%</td> <td>$23.52</td> </tr> <tr> <td>/services.html</td> <td>421</td> <td>60.3%</td> <td>$724.32</td> </tr> <tr> <td>/blog/post.html</td> <td>1233</td> <td>93.2%</td> <td>$126.34</td> </tr> </tbody> </table> </div>
- 締切済み
- CSS
- CSSのテーブルについて教えて下さい。
テーブルなのですがh1が適用されません。 又表の枠線が黒になりません。 また（休診）を赤にしたいのですが表示されません。 どこをどう直したらいいのか教えて下さい。 お願いします。 h1 { margin: 1em 0; padding: 0.3em; border: 1px silver solid; background: url(../image/subpage_h2_bg.gif) bottom repeat-x; color: gray; font-weight: bold; font-size: large; } /*hyou*/ caption{ color: #996666; padding-bottom: 14px; text-align: center; } table{ width: 800px; border: solid 2px ; border-collapse: collapse; } th,td { padding: 5px; border: solid 1px #000000; text-align:center; } th { background-color:silver; font-weight: bold; } td.col01{ font-weight: bold; background-color:silver; } em { color: red; font-weight: bold; } /* テーブル列幅指定 */ .cola { width:100px; } .col01{ width: 100px; } .col02{ width: 70px; } .col03{ width: 70px; } .col04{ width: 70px; } .col05{ width: 70px; } .clo06{ width: 70px; } .style1 {margin-left:1em; } HTML <h1>外来診療のご案内</h1> <table> <caption>外来診療 予定表</caption> <tr> <th class="a">診察科</th> <th class="b">月</th> <th class="c">火</th> <th class="d">水</th> <th class="e">木</th> <th class="f">金</th> <th class="g">土</th> <th class="h">日</th> </tr> <tr> <th class="col01">一般歯科</th> <td class="col02" rowspan="4"><em>休診</em></td> <td class="col03" colspan="5">◯</td> <td class="col04" rowspan="4"><em>休診</em></td> </tr> <tr> <th class="col01">小児歯科</th> <td class="col02">◯</td> <td class="col03"> </td> <td class="col04">◯</td> <td class="col05"> </td> <td class="col06">◯</td> </tr> <tr> <th class="col01">歯列矯正</th> <td class="col02"> </td> <td class="col03">◯</td> <td class="col04"> </td> <td class="col05">◯</td> <td class="col06"> </td> </tr> <tr> <th class="col01">審美歯科</th> <td class="col02"> </td> <td class="col03">◯</td> <td class="col04"> </td> <td class="col05"> </td> <td class="col06">◯</td> </tr> </table>
- ベストアンサー
- HTML
お礼
ありがとうございます。 やはりどうやってもダメでした。 Javascriptを使おうと思います。
補足
返信ありがとうございます できればCSSのみで対応したかったのですが 無理でした。