How can I invert colors in social icons, in this case?

I’ve social icons in top bar and footer. In each section (top/footer), the social icons has differents base colors (text-color/background-color).

https://www.topmenaje.com/

I’m trying to invert colors in this icons (normal color / hover color). I mean, normally they show the old-hover-color, and when you put the mouse over they, you can see the old-normal-color.

I’ve used this code from other post, modified for my case:

#top #wrap_all .av-social-link-facebook:hover a {
	color: #757575 !important;
	background-color: transparent !important;
}

#top #wrap_all .av-social-link-facebook a {
	color: #ffffff !important;
	background-color: #37589b !important;
}

#top #wrap_all .av-social-link-linkedin:hover a {
	color: #757575 !important;
	background-color: transparent !important;
}

#top #wrap_all .av-social-link-linkedin a {
	color: #ffffff !important;
	background-color: #419cca !important;
}

#top #wrap_all .av-social-link-gplus:hover a {
	color: #757575 !important;
	background-color: transparent !important;
}

#top #wrap_all .av-social-link-gplus a {
	color: #ffffff !important;
	background-color: #de5a49 !important;
}

#top #wrap_all .av-social-link-twitter:hover a {
	color: #757575 !important;
	background-color: transparent !important;
}

#top #wrap_all .av-social-link-twitter a {
	color: #ffffff !important;
	background-color: #46d4fe !important;
}

#top #wrap_all .av-social-link-youtube:hover a {
	color: #757575 !important;
	background-color: transparent !important;
}

#top #wrap_all .av-social-link-youtube a {
	color: #ffffff !important;
	background-color: #a72b1d !important;
}

#top #wrap_all .av-social-link-vimeo:hover a {
	color: #757575 !important;
	background-color: transparent !important;
}

#top #wrap_all .av-social-link-vimeo a {
	color: #ffffff !important;
	background-color: #46d4fe !important;
}

#top #wrap_all .av-social-link-instagram:hover a {
	color: #757575 !important;
	background-color: transparent !important;
}

#top #wrap_all .av-social-link-instagram a {
	color: #ffffff !important;
	background-color: #a67658 !important;
}

#top #wrap_all .av-social-link-pinterest:hover a {
	color: #757575 !important;
	background-color: transparent !important;
}

#top #wrap_all .av-social-link-pinterest a {
	color: #ffffff !important;
	background-color: #a72b1d !important;
}

But I don’t know how can I set hover-text-color with normal-text-color of these section (top/footer). Because in each section are differents.

• This topic was modified 8 years, 5 months ago by LEPT. Reason: gramatical error in title