Change the color of the hyperlinked words when the cursor is hovering over them

Hi!

I would like to find out how to change the color of the hyperlinked words when the cursor is hovering over the words (before clicking on the words which will link to another web pages).

I tried this code provided in a post: https://colorlibsupport.com/t/remove-post-body-link-hover-border/

body.single .entry-content a {
color: #393939;
}
body.single .entry-content a:hover {
background: transparent;
color: #a161bf;
}

It removed the black box hovering over the hyperlinked words but it did not change the hovering color. Currently, the hyperlinked word “here” will not change word when my cursor hovered over it. I have attached a screenshot for you reference! Thanks!

Hi sorry just to clarify:

The code above removed the black box hovering over the hyperlinked words but it did not change the hovering color. Currently, the hyperlinked word “here” will not change COLOR when my cursor hovered over it. I have attached a screenshot for you reference! Thanks!

Hi

I just realised that I attached the wrong screenshot.

My question is basically: How to make the word “here” (which is hyperlinked to another webpage) change color (to grey) when the cursor hovers over it? Thanks!

Hi @wanderer74,

I hope you are well today and thank you for your question.

Could you please share me the page URL from your site where it is not working so that i can troubleshoot it?

Kind Regards,
Movin

Hi Movin

Thanks for your help. It is actually not working for all my hyperlinked words in all the posts.

You can take a look at http://whywendywrites.com/peace-boat/

All the italicised “here” words are hyperlink to another webpage when they are clicked on. I would like the words “here” to change color (to light grey) when the cursor hovers over them. So that when the readers see the color of “here” change to light grey, they know they can click on it and go to the link.

Hope I am not confusing you! Thanks!

Thank you for sharing the page URL from your site.

I troubleshooted it and found it is not working on your site because of CSS conflict so tomake it work please try using the below CSS code.


body.single .entry-content a {
color: #393939 !important;
}
body.single .entry-content a:hover {
background: transparent;
color: #D3D3D3 !important;
}

Hi

THANK YOU so much!!! It works perfectly!

You are most welcome here :slight_smile: