Search code examples
csswordpressstylesmousehoveronhover

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

Recently made some changes to social icons on my site, and wanted social icons to be grayed when posts are loaded here , but when close with cursor to it ,to return their original colours, like i did here. I searched in CSS, but dont found a class for hover effect when close to buttons. Currently have this CSS applyed:

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

i tryed to do this:

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

but didnt change nothing.

Any help?

Solution

  • :hover does not take any arguments, i.e. you cannot place selectors in parentheses after :hover.

    Your rule should look like this:

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