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

【问题标题】：Highlight cells in hovered row in HTML table which have no rowspan突出显示 HTML 表格中悬停行中没有行跨度的单元格
【发布时间】：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 你说得对，我会用小提琴传递标记

标签： css html-table hover

【解决方案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.

参考资料：

【讨论】：

感谢您的 sn-p。不幸的是，我忘了提到我搜索了仅 CSS 的解决方案。无论如何，+1
@Joshua：抱歉，我应该看到没有 jQuery，甚至没有 JavaScript 标签。不过，出于某种原因，我确信有人在那里。