gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 16:48:43 24 4
gpt4 key购买 nike

我希望这不会重复。我希望整行都在 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>

最佳答案

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

您可以使用 tbody为了那个原因。
您可以放置​​多个 tbody在根据 w3 的表格中 spec .

Table rows may be grouped into a table head, table foot, and one or more table body sections [...]



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>

关于html - CSS:表格 - 带有 colspan 的行 - 悬停时更改整行颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62170667/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com