gpt4 book ai didi

css - 突出显示 HTML 表格中没有行跨度的悬停行中的单元格

转载 作者:行者123 更新时间:2023-12-04 14:06:25 24 4
gpt4 key购买 nike

这里有一个有趣的问题:

有一张表格,其中包含一些单元格,其中一些单元格具有行跨度:

+----+----+----+----+
| | | c4 | cx |
| | c2 +----+----+
| | | c5 | cx |
| c1 +----+----+----+
| | | c6 | cx |
| | c3 +----+----+
| | | c7 | cx |
+----+----+---------+

使用以下 CSS,我只想在悬停该行时突出显示单元格 c4、c5、c6、c7 和相应的 cx 单元格:

tr:hover td:not([rowspan]) {
background: #F1F1F1;
}

当 c4 .. c7 悬停时,效果很好——只有单元格本身及其对应的 cx 单元格获得新的背景色。

当 c1 到 c3 悬停时,c4 行也悬停 - 考虑到选择器,这非常有意义。问题是我不希望它以这种方式运行并且不知道如何阻止它。

有什么想法吗?如果需要,我会提供 fiddle 。

最佳答案

您不能创建一个选择器来执行此操作,但您可以添加另一个选择器来覆盖突出显示的背景:

<!DOCTYPE html>
<style>
tr:hover td:not([rowspan]) {background: red}
tr:hover td[rowspan]:hover ~ td {background: none;}
</style>
<table>
<tr><td rowspan=2>c1</td><td>cx</td><td>cx</td></tr>
<tr><td>cx</td><td>cx</td></tr>
</table>

td:hover ~ td表示任何 <td> (具有相同的父级)在悬停 <td> 之后.

关于css - 突出显示 HTML 表格中没有行跨度的悬停行中的单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17149418/

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