食べられるかと思ったけど…ダメでした

テーブルの行の背景色をマウスオーバー時に変えたい

解決済

  • 質問者：aoumiushi
  • 質問日時：
  • 回答数：2件

<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://oshiete.goo.ne.jp/qa/4793130.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>

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： think49
  • 回答日時：

#1 です。



tr:nth-child(4):hover 時に2行分ハイライトしないので、JavaScript を使う方法に変更。
http://jsbin.com/ohule/3

# 後の祭りですが、<tbody> で区切れば良かったかもしれませんね…。
    • good
    • 0
    • 件
通報する
この回答へのお礼

再びご回答ありがとうございます。
おかげさまで、納得のいく形になりました。
JavaScript、CSSともに勉強不足なので、これからも努力してまいります。
どうもありがとうございました。

通報する
お礼日時：2010/12/30 16:57

No.1

  • 回答者： think49
  • 回答日時：

兄弟セレクタを利用してください。


http://zng.info/specs/css3-selectors.html#adjace …
http://jsbin.com/ohule/2
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
参考サイトまでご紹介していただき、ありがとうございました。

通報する
お礼日時：2010/12/30 16:53

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報