テーブルの背景をマウスオーバーで変える

解決済

質問者：SAY_MAN
質問日時：2008/09/23 14:27
回答数：2件

お世話になります
よろしくお願いします

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>

以上よろしくお願いします

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： noname#77303
回答日時：2008/09/25 10:25

こんにちは。

先の方がおっしゃる通り、IEでhoverが有効なのは<a>だけのようですね。
実際に
table tr.odd:hover
・・・{
background-color:#FFF00;
}
と言う部分を全て
table tr.odd a:hover
・・・{
background-color:#FFF00;
}
にし、TDタグの内容に全てリンクを設置したら成功しました。
リンクを貼って、CSSでリンクを普通のテキストのように装飾してごまかすか、javascriptを利用するのがよいと思います。