Change specific link hover color in widget

  • Hi, I see that there are similar threads, but all have to do with child themes (which I haven’t been able to work out yet).
    Is there a way of changing hover color via Custom CSS? The html inside the widget currently reads:

    <a href="https://thisisthewebpagelink/">This is the text that bears the hyperlink whose hover color I'd like to change.</a>

&nbsp;

    The only thing that has worked so far has been:

    a:hover {
    text-decoration: none;
  	color: #f76816 !important;
}

    But this changed the hover color for all links on the site (not good as they do not show up against the backgrounds).
    How can I apply this to just the one set of links?

    Thanks so much in advance!

    https://www.ads-software.com/plugins/css/

Viewing 1 replies (of 1 total)

  • Hi

    You have a couple of choices.

    1) you need to use a more specific selector to target just links in the specific text widget as each text widget will have a unique ID, for example
    #text-2 a:hover { color:#f76816; }

    2) Or you can add a class to your <a> tag and then define a style for that. For example
    <a class="custom-hover-color" href="https://thisisthewebpagelink/">This is the text that bears the hyperlink whose hover color I'd like to change.</a>
    and in your style.css
    a.custom-hover-color:hover { color: color:#f76816; }

    If you need further help, please provide a link to your website.

Viewing 1 replies (of 1 total)
  • The topic ‘Change specific link hover color in widget’ is closed to new replies.

Tags