homerboy homerboy - 1 month ago 6
CSS Question

Reset state of link after clicking

I have a button like so:

enter image description here

When I hover over it, it looks like this:

enter image description here

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:

enter image description here

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

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.