Изображение Greyscale с CSS и перекрасить социальные иконки при наведении мыши?

Question

Недавно я внес некоторые изменения в социальные иконки на моем сайте и хотел, чтобы социальные иконки отображались серым цветом при загрузке сообщений здесь, но при закрытии курсором, чтобы они возвращали свои исходные цвета, как я сделал здесь. Я искал в 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%);
}