- This topic has 9 replies, 2 voices, and was last updated 2 years ago by David.
-
AuthorPosts
-
March 28, 2022 at 6:27 am #2169732Shaun
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!
March 28, 2022 at 6:33 am #2169746DavidStaffCustomer SupportHi there,
target the
a
inside ap
π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.
March 28, 2022 at 6:33 am #2169747ShaunOops forgot to attach the screenshot!
March 28, 2022 at 6:34 am #2169748DavidStaffCustomer SupportMarch 28, 2022 at 6:35 am #2169750ShaunHey 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; }
March 28, 2022 at 6:38 am #2169753DavidStaffCustomer SupportHmmm…. thats a inescapable problem.
May i ask how or why the image is inside a Paragraph ? How were they added to the content ?March 28, 2022 at 6:45 am #2169760ShaunI 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.
March 28, 2022 at 6:52 am #2169766DavidStaffCustomer SupportThe 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 ap
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.
March 28, 2022 at 6:57 am #2169772ShaunAwesome! 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!!!
March 28, 2022 at 6:59 am #2169776DavidStaffCustomer SupportAwesome – glad to be of help π
-
AuthorPosts
- You must be logged in to reply to this topic.