JSFiddle - React, Tailwind, and code Playground

HTML

<a class="hover1" href="#">adieu</a><br>
<a class="hover1" href="#">adieu</a><br>
<a class="hover2" href="#">adieu</a><br>
<a class="hover2" href="#">adieu</a><br>
<a class="hover3" href="#">adieu</a><br>
<a class="hover3" href="#">adieu</a><br>
<a class="hover4" href="#">adieu</a><br>
<a class="hover4" href="#">adieu</a><br>
<a class="hover5" href="#">adieu</a>

CSS

a { font-size: 3em; color: #000; }
.hover1 { color: silver; }
.hover2 { color: gold; }
.hover3 { color: red; }
.hover4 { color: blue; }
.hover5 { color: green; }

/* if you never define the a:hover color, there will be no hover color,
comment it out to see what I mean...
If you do have a hover color defined, then you could use the javascript,
but like you said, it is kind of silly since the CSS solution is best */
a:hover { color: purple; }

JavaScript

/* Un-comment this out, then hit the [Run] button to see the script work

$('a').each(function(){ 
 var t = $(this).css('color');
 $(this).css('color',t );
})

*/