文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS:在悬停时更改整行颜色

问CSS:在悬停时更改整行颜色
EN

Stack Overflow用户

提问于 2020-06-03 10:29:33

回答 2查看 878关注 0票数 5

我希望这不是重复。我真希望整个行在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>

css

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-06-03 10:49:13

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

为此您可以使用tbody。根据tbody w3 等级库，您可以在一个表中放置多个等级库。

表行可以分组为表头、表脚和一个或多个表体段。

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

<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>

票数 2

Stack Overflow用户

发布于 2020-06-03 10:53:05

将每行的td元素包装在tbody中，并在css中将其作为目标：

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

		tbody[row]:hover {
			background-color: grey;
		}

	</style>
</head>
<body>
	<table border="1px">
      <tbody row>
		<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 row>
		<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>
</body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62170667

复制

相似问题

问CSS:在悬停时更改整行颜色
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS:在悬停时更改整行颜色EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS:在悬停时更改整行颜色
EN