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

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

Home Forums Support Possible to only have text anchor links change background color on hover?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2169732
    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!

    #2169746
    David
    Staff
    Customer Support

    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.

    #2169747
    Shaun

    Oops forgot to attach the screenshot! Screenshot

    #2169748
    David
    Staff
    Customer Support
    #2169750
    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;
    }
    #2169753
    David
    Staff
    Customer Support

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

    #2169760
    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.

    screenshot

    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.

    #2169766
    David
    Staff
    Customer Support

    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.

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

    #2169776
    David
    Staff
    Customer Support

    Awesome – glad to be of help πŸ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.