Archived topic
Possible to only have text anchor links change background color on hover?
9 replies · Started by Shaun on March 28, 2022
Hello! Is there a way to change the anchor text's background color on hover without using CSS? I tried it with CSS and while the anchor text's background color does change on hover, images will get affected by it too (see attached screenshot).
This is the code that I used:
/*define the colour of regular anchor LINKs*/
.elementor-widget-theme-post-content a:link {
color: #1e7ed3;
transition: 0.3s;
}
/*define the colour of anchor links VISITED*/
.elementor-widget-theme-post-content a:visited {
color: #1e7ed3;
transition: 0.3s;
}
/*define the colour + bg colour of anchor links on HOVER*/
.elementor-widget-theme-post-content a:hover {
background-color: #1e7ed3;
color: #ffffff;
transition: 0.3s;
}Providing link for reference too: https://swordsandstationery.com/learning/help-for-dyslexia-singapore/
Thanks in advance for any advice!
Hi there,
target the a inside a p :)
For example change this line:
elementor-widget-theme-post-content a:link
to:
elementor-widget-theme-post-content p a:link
Apply the same logic to all your CSS selectors and then its only links inside paragraphs that are affected.
Oops forgot to attach the screenshot! 
Hey David, tried it but it still highlights the image :(
.elementor-widget-theme-post-content p a:link {
color: #1e7ed3;
transition: 0.3s;
}
/*define the colour of anchor links VISITED*/
.elementor-widget-theme-post-content p a:visited {
color: #1e7ed3;
transition: 0.3s;
}
/*define the colour + bg colour of anchor links on HOVER*/
.elementor-widget-theme-post-content p a:hover {
background-color: #1e7ed3;
color: #ffffff;
transition: 0.3s;
}Hmmm.... thats a inescapable problem.
May i ask how or why the image is inside a Paragraph ? How were they added to the content ?
I used Elementor Theme Builder to build the template for blog posts. However, I'm using Classic Editor to edit my posts. I add images by clicking on the Add Media button.
What's really odd is that the captions under the images don't show the background color on hover (which I'm fine with). I don't understand why the images would have the background color shown.
The issue is your Images are all being output like so:
<p>
<a href="a_url">
<img>
</a>
</p>So its the link around the image that is showing. My solution to only target a within a p failed because the image is inside a link thats inside the paragraph.
If you switch the editor to code editor. You will see the HTML its gonna like this:
<p><a href="https://das.org.sg" target="_blank" rel="noopener"><img html here removed for simplicity"></a></p>
What you can do is edit this part of the HTML:
<a href="https://das.org.sg" target="_blank" rel="noopener">
And a CSS class to it eg.
<a class="plain-link" href="https://das.org.sg" target="_blank" rel="noopener">
Now you can use that Class in your CSS like so:
/*define the colour of regular anchor LINKs*/
.elementor-widget-theme-post-content a:not(.plain-link):link {
color: #1e7ed3;
transition: 0.3s;
}
/*define the colour of anchor links VISITED*/
.elementor-widget-theme-post-content a:not(.plain-link):visited {
color: #1e7ed3;
transition: 0.3s;
}
/*define the colour + bg colour of anchor links on HOVER*/
.elementor-widget-theme-post-content a:not(.plain-link):hover {
background-color: #1e7ed3;
color: #ffffff;
transition: 0.3s;
}That will target any link that does NOT have the plain-link class.
Alternatively.... use the Block Editor, it doesn't suffer from displaying images inside paragraphs.
Awesome! Thanks so much for your help David! Yeah after the previous post, I thought it might have been the classic editor too that wrapped the a within the p. However, I just can't bring myself to let go of the classic editor lol!
Really appreciate the help once again. GeneratePress for life!!!
Awesome - glad to be of help :)
