※ ChatGPTを利用し、要約された質問です（原文：テーブルの行の背景色をマウスオーバー時に変えたい）
テーブルの行の背景色をマウスオーバー時に変えたい
<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>
お礼
再びご回答ありがとうございます。 おかげさまで、納得のいく形になりました。 JavaScript、CSSともに勉強不足なので、これからも努力してまいります。 どうもありがとうございました。