[Resolved] Possible to only have text anchor links change background color on hover?

[Shaun]

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!

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shaun]

Oops forgot to attach the screenshot!

[David]

See my reply above:
https://generatepress.com/forums/topic/possible-to-only-have-text-anchor-links-change-background-color-on-hover/#post-2169746

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shaun]

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;
}

[David]

Hmmm…. thats a inescapable problem.
May i ask how or why the image is inside a Paragraph ? How were they added to the content ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shaun]

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.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shaun]

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!!!

[David]

Awesome – glad to be of help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts