How do I unhover on a link using CSS/JavaScript?

Question

I'm using CSS to set my links to red when I hover over them. Clicking on them would open a new tab, but my links would remain hovered(red). Is it possible to unhover on a button click? This looks really bad, especially on mobile.

CSS:
a:hover {
color: red;
}

HTML:
<a href="www.example.com" target="_blank">Open site in new tab, remains red</a>

Answer 1

The state of the link ie a tag is focus after we have just clicked on it and have not clicked anywhere else. So, most probably you want to change the style for :focus state of your anchor tag.

CSS:
a:hover {
color: red;
}
a,
a:focus
{
  color: green; /* or whichever is your default color */
}

/* You can also add same or different style for a:visited state, which applies to anchor tags which have been visited */

HTML:
<a href="www.example.com" target="_blank">Open site in new tab, remains red</a>

Answer 2

One way is on click you can add a class to the button that has the original background color when its not being hovered or clicked..

(This example uses Jquery)

 $('.button').click(function() { $(this).addClass('button-onclick'); }) 

 body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .button { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; background-color: red; border-radius: 100%; } .button:hover { background-color: green; } .button-onclick:hover { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="button">clickers</div> 

fiddle

https://jsfiddle.net/Hastig/hL4dt60k/