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

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%);
}