CSS：表格 - 带有 colspan 的行 - 在悬停时更改整行颜色

Question

CSS：表格 - 带有 colspan 的行 - 在悬停时更改整行颜色

我希望这不会重复。我希望整行都有颜色tr[child]:hover

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">

		tr[origin]:hover {
			background-color: grey;
		}

		tr[origin]:hover + tr[child]{
			background-color: grey;
		}

		tr[child]:hover {
			background-color: grey;
		}

	</style>
</head>
<body>
	<table border="1px">

		<tr origin>
			<td rowspan="2">1</td>
			<td colspan="2">Question</td>
			<td rowspan="2">2/3</td>
			<td rowspan="2">View answer</td>
		</tr>
		<tr child>
			<td>Rasp 1</td>
			<td>Rasp2</td>
		</tr>

		<tr origin>
			<td rowspan="2">1</td>
			<td colspan="2">Question</td>
			<td rowspan="2">2/3</td>
			<td rowspan="2">View answer</td>
		</tr>
		<tr child>
			<td>Rasp 1</td>
			<td>Rasp2</td>
		</tr>
	</table>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Dio*_*nys 3

这是一个非常有趣的问题！

你可以用tbody它。tbody根据 w3规范，您可以在表中放置多个。

表格行可以分为桌头、桌脚和一个或多个桌体部分 [...]

tbody:hover {
  background-color: #CCCCCC;
}

Run Code Online (Sandbox Code Playgroud)

<table border="1px">

  <tbody>
    <tr origin>
      <td rowspan="2">1</td>
      <td colspan="2">Question</td>
      <td rowspan="2">2/3</td>
      <td rowspan="2">View answer</td>
    </tr>
    <tr child>
      <td>Rasp 1</td>
      <td>Rasp2</td>
    </tr>
  </tbody>

  <tbody>
    <tr origin>
      <td rowspan="2">1</td>
      <td colspan="2">Question</td>
      <td rowspan="2">2/3</td>
      <td rowspan="2">View answer</td>
    </tr>
    <tr child>
      <td>Rasp 1</td>
      <td>Rasp2</td>
    </tr>
  </tbody>

</table>

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，10 月前
查看次数：	352 次
最近记录：	5 年，10 月前