Reset state of link after clicking

Question

I have a button like so:

When I hover over it, it looks like this:

When I click on it, it'll take me to a new tab that shows my resume. However, when I come back, there's an underline that I'd like to remove:

And I can and did remove it because I styled the :focus part of the button:

.resume-button:focus {
    text-decoration: none;
    color: #FFFFFF;
}

The problem arises when the user tries to hover over the link again. It's not hovering anymore because the link is still "clicked"; hence when I hover, the color of the text "Resume" remains white and won't change color until I click somewhere else to reset the link. How can I reset the state of the <a> without clicking on some other part of the website?

Answer 1

Try active and visited state to cover all possibilities. Sometimes link stays active after using browser back button, and links may be marked as visited during normal web browsing.

a:active, a:visited {
color: #fff;
}

Link can have four states:

1. a:link - a normal, unvisited link
2. a:visited - a link the user has visited
3. a:hover - a link when the user mouses over it
4. a:active - link in the moment when clicked

These are the pseudoclasses and they should be declared in this specified order, because in a timeline they can happen only one after other.

People tend to think some shortcuts helpful in remembering the right sequence for example: LoVeHAte.