Change Color of Icons on Hover

[thompsonsgg]

I would like to change the background color of the icons on this page when they are hovered over so it is clear they are links, but I can’t seem to make it work. I tried adding in custom CSS for a link hover, but that only changed the color of the text beneath the icon, and not the icon itself. How can I achieve this?

http://52.10.233.244/affirmative-action-hiring/

[christopher]

Hi Annmarie,

Please kindly add the CSS code below to X > Theme Options > CSS:

.x-text-headline .x-icon:hover {
    background-color: #440044 !important;
    transition: 0.5s all ease-in-out;
}

As you used the headline element the code says that check all the headline elements and check the icon inside and change the color of background of icon on hover.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thank you.

[thompsonsgg]

Thank you! This worked for me.

[ruenel]

You’re welcome AnnMarie!
It’s good to know that it has worked for you.