2

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

有一个包含少量单元格的表格，其中一些具有行跨度：

+----+----+----+----+
|    |    | 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 也悬停 - 考虑到选择器非常有意义。问题是我不希望它以这种方式运行并且不知道如何阻止它。

有任何想法吗？如果需要，我会提供一个小提琴。

4

2 回答 2

7

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

<!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>。

于 2013-06-17T14:26:59.060 回答
2

我建议一种方法：

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

JS 小提琴演示。

参考：

于 2013-06-17T14:24:12.193 回答