在鼠标悬停的社交图标上使用 CSS 和重新着色的图像灰度？

Question

最近对我网站上的社交图标进行了一些更改，并希望在加载帖子时社交图标变灰here，但是当将光标靠近它时，会返回它们的原始颜色，就像我做的here一样。我在 CSS 中搜索，但在靠近按钮时没有找到悬停效果类。目前已应用此 CSS：

.single .nc_socialPanel:not(.nc_floater):not(.nc_socialPanelSide) {
  width:20%!important;
  float:right!important;
   filter: grayscale(100%);
 }

我尝试过这样做：

.single .nc_socialPanel:hover(.nc_floater):hover(.nc_socialPanelSide) {
  filter: grayscale(0%);
}

但没有任何改变。

有什么帮助吗？

Answer 1

:hover 不接受任何参数，即您不能将选择器放在 :hover 之后的括号中。

您的规则应如下所示：

.single .nc_socialPanel:not(.nc_floater):not(.nc_socialPanelSide):hover{
    filter:grayscale(0%);
}