Question

我想在表上（仅在css中悬停时）应用称为“ blur”的过滤器，但不包括当时悬停的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>

有帮助吗？

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

1 个答案: