[Resolved] Footer hyperlinks change color

[Gary]

Hi there,
In my footer, created with Elementor, I have links to other pages on my website. I have set the Normal color of them to dark grey (losing the blue native color) to match the rest of the text in the footer. I want them to change color on hover. I’ve tried everything I can find and haven’t found it yet. Can you guys help?
Thank you.

[Gary]

Hi there,
In my footer, created with Elementor, I have links to other pages on my website. I have set the Normal color of them to dark grey (losing the blue native color) to match the rest of the text in the footer. I want them to change color on hover. I’ve tried everything I can find and haven’t found it yet. Can you guys help? My website: https://bit.ly/2Yn2AlQ
Thank you.

[David]

Hi there,

currently they are grabbing the hover link color set in the Customizer colors. If you want to target them specifically you can use this CSS:

.elementor-element-66a66ac a:hover {
    color: red !important;
}

It would be best if you edited the widget in Elementor > Advanced tab and gave the Widget a custom class e.g footer-links and then replace .elementor-element-66a66ac with .footer-links in the above CSS

[Gary]

Hi David,
I found similar code just after I used the ticket and put it in the customiser and it worked okay, I guess in this location it was for the whole website.

I removed the above code and placed your code (a:hover, a:focus { color: #558efc !important; }) where you suggested and it worked too and I’m guessing it’s just for the footer element which is much better.

I had noticed the Custom CSS in Advanced but never considered it. So a couple of things learned and hover working as I want to – thank you.

[David]

Glad to hear you found a solution – yes the Additional CSS will cover the entire site.

[Gary]

Always great and quick support – thank you.

[David]

You’re welcome

[Author]

Posts