突出显示 HTML 表格中悬停行中没有行跨度的单元格
Posted
技术标签:
【中文标题】突出显示 HTML 表格中悬停行中没有行跨度的单元格【英文标题】：Highlight cells in hovered row in HTML table which have no rowspan 【发布时间】：2013-06-13 12:27:20 【问题描述】：这里有个有趣的问题：
有一张表格，里面有几个单元格，其中一些有行跨度：
+----+----+----+----+
| | | 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 也悬停 - 考虑到选择器非常有意义。问题是我不希望它以这种方式运行并且不知道如何阻止它。
有什么想法吗？如果需要，我会提供小提琴。
【问题讨论】：
悬停c2 时应突出显示哪些单元格？对于c1?
在这两种情况下，都不应突出显示任何单元格
始终提供标记。用手把这些都写出来很痛苦。
@cimmanon 你说得对，我会用小提琴传递标记
【参考方案1】：
您无法创建一个选择器来执行此操作，但您可以添加另一个选择器来覆盖突出显示的背景：
<!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 与 :not 一起使用，它运行良好，所以 +1。但是，我正在使用 Chrome。 IE8 和更早版本不支持 :not 选择器 w3schools。 @Airn5475 你说的是正确的，但一般来说请避免使用 w3schools - 他们是not affiliated with W3C and have low quality material。使用W3C-endorsed WebPlatform.org 或Mozilla's MDN。【参考方案2】：我建议一种方法：
$('td').not('[rowspan]')
.hover(function ()
$(this)
.siblings()
.andSelf()
.not('[rowspan]').addClass('highlight');
, function()
$(this)
.parent()
.find('.highlight')
.removeClass('highlight');
);
JS Fiddle demo.
参考资料：
addClass()。
andSelf()。
hover()。
not()。
parent()。
removeClass()。
siblings()。
【讨论】：
感谢您的 sn-p。不幸的是，我忘了提到我搜索了仅 CSS 的解决方案。无论如何，+1 @Joshua：抱歉，我应该看到没有 jQuery，甚至没有 javascript 标签。不过，出于某种原因，我确信有人在那里。以上是关于突出显示 HTML 表格中悬停行中没有行跨度的单元格的主要内容，如果未能解决你的问题，请参考以下文章