Question

我在这里遇到了一个有趣的问题：

有一个包含少量单元格的表格，其中一些单元格有行间距：

+----+----+----+----+
|    |    | 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也会悬停 - 考虑到选择器，这是完全合理的。问题是我不希望它以这种方式表现，也不知道如何阻止它。

有什么想法吗？如果有要求，我会提供一个小提琴。

Answer 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>（具有相同的父级）。

Answer 2

一种方法，我建议：

$('td').not('[rowspan]')
.hover(function () {
    $(this)
    .siblings()
    .andSelf()
    .not('[rowspan]').addClass('highlight');
}, function(){
    $(this)
    .parent()
    .find('.highlight')
    .removeClass('highlight');
});

JS Fiddle demo

参考文献：

突出显示HTML表格中没有行数的悬停行中的单元格

2 个答案: