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) 定位所有表格单元格，并且第一个选择器的特异性 (12) 比第二个选择器 (11) 更高。为了使第二个选择器获胜，它必须至少具有相同的特异性，并且放置在第一个选择器之后。

要将其特异性提高 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>

这有帮助吗？