html - 如何从表的悬停中排除悬停的 td？

Question

我想在表格上应用名为“模糊”的过滤器（仅在 css 中悬停），不包括在那一刻悬停的 td。否则从页面加载应用过滤器模糊。那么，如何仅通过使用 CSS 从表的悬停中排除悬停的 td 呢？

table td {
    filter: blur(1px);
}   

td:hover {
    filter:blur(0px)
}

Answer 1

为了使表格仅在悬停时模糊，您必须使用选择器table:hover。现在，因为应用于元素的过滤器也应用于其子元素，并且因为您希望其中一个单元格（它是子元素）没有该过滤器，所以您不能将其应用于整个表格。相反，您需要将其应用于悬停表格中的每个单独的单元格，就像您所做的那样，但添加了伪选择器：table:hover td。

然后，要从悬停的单元格中删除过滤器，您自然会将过滤器应用于以下选择器：td:hover. 这里的问题是您已经使用前一个选择器 ( table:hover td) 定位了所有表格单元格，并且第一个选择器具有比第二个选择器 (11) 更高的特异性 (12)。为了使第二个选择器获胜，它必须至少具有相同的特异性并放在第一个选择器之后。

要将其特异性增加 1，您只需table在其前面添加一个空格即可。这意味着它以表格中悬停的单元格为目标，这就是您想要的。

您最终得到以下工作代码：

table:hover td { /* Specificity 12 */
  filter: blur(1px);
}

table td:hover { /* Also specificity 12, but placed after, so it wins */
  filter: blur(0px);
}

<table>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

这有帮助吗？