Remove hover effect on Social Media Icons

lnesrala · January 2016

Hi,

I need to remove the hover effect on the social media icons of the footer of our site. I want the colored icons to display permanently (like the Facebook example in the image). Heres is the code I am using in the widget. I've included an image of the example. - Thanks!

Site: http://www.resources.gocabe.org/

Albert · January 2016

Hi,

if you want to change the color of every icon and remove hover effect, you need to use the following css:

a.icon_bar_facebook { background-color: #000 !important; color: #FFF !important; }
a.icon_bar_google { background-color: #000 !important; color: #FFF !important; }
a.icon_bar_twitter { background-color: #000 !important; color: #FFF !important; }
a.icon_bar_vimeo { background-color: #000 !important; color: #FFF !important; }
a.icon_bar_youtube { background-color: #000 !important; color: #FFF !important; }
a.icon_bar span.b { display: none !important; }

lnesrala · January 2016

Hi,

Thanks for providing the code. Unfortunately, the icons have all turned black, and they continue to have a rollover effect active. I would like to keep the icon in more of a static feel.

With the code you provided, it looks like I can set the color, but I still don't know what to do about the effect? Thanks for your help.

Albert · January 2016

This is what we exactly gave you. If you want individual colors for each icon, you need to set own colors in above css.

lnesrala · January 2016

I worked out the colors just fine. How would you remove the hover effect that makes the icon disappear when the mouse floats over it.

Thanks for your help.

Albert · January 2016

To make those icons fixed white color, you need to use the following css:

.style-simple a.icon_bar:hover span.t {
    opacity: 1;
    color: #fff;
}

lnesrala · January 2016

Thanks!

Albert · January 2016

You're welcome!

Remove hover effect on Social Media Icons

Comments