If I have a <div>, I can easily control its color using CSS:
<div class="good">Hello</div>
.good { color: green; }
Similarly, I want to style links in the same way:
<a href="...", class="good">Hello</a>
.good { color: green; }
I prefer the link to remain green even during mouse hover, similar to the behavior of the <div>. While I can achieve this by declaring:
.good:hover { color: green; }
It becomes cumbersome as I need to remember to add it for each class applied to the <a> element. Is there an easier way to prevent color change on hover for <a>? I'm considering something like:
a:hover { color: do-not-change; }
or:
a:hover { color: inherit-from-non-hover; }
Update
I forgot to mention that I've globally set styles for a and a:hover to override default browser settings:
a, a:hover { color: black; text-decoration: none; }
This is because I'm unsure how to disable hover color changes. Ideally, I would like to achieve the following:
a { color: black; }
a:hover { color: <some way to prevent changing>; }
.good { color: green; }
This setup ensures that regular <a> text remains black regardless of hovering, while <a class="good"> appears green whether hovered over or not.