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

Question

最近对我网站上的社交图标进行了一些更改，并希望社交图标在加载帖子时变灰 here , but when close with cursor to it ,to return their original colours, like i did here。我在 CSS 中搜索，但没有找到 class 靠近按钮时的悬停效果。目前已应用 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%);
}

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

Image Greyscale with CSS & re-color on mouse-over social icons?

css

wordpress

styles

mousehover

onhover