Resetting visited colour

I need to have the colour of the links to开发者_如何学编程 change on hover but go back to original once clicked, the code I currently use stops the hover from changing once a link has been clicked.

<div id="nav1"><a href="clients.html">/Clients</a></div>

#nav1 {
    position: absolute;
    font-family: "Gill Sans";
    font-weight: 300;
    font-size: 10pt;
    letter-spacing: 0.15em;
    color: #fff;
    margin-top: 30px;
    margin-left: 20px;
}
#nav1 a:link {
    color: #fff;
    text-decoration: none;
}
#nav1 a:hover {
    color: #e8138b;
    text-decoration: overline;
}
#nav1 a:visited {
    color: #fff;
    text-decoration: none;
}

Put your declaration of a:hover after a:visited.

Move the :hover styles below the :visited styles. They have equal selector specificity, so the last styles takes effect for a link that is :hover and :visited.

By the way, if you wanted a separate style altogether, you can use :hover:visited.

This should do the trick...

#nav1 a:link,
#nav1 a:visited {
  color: #fff;
  text-decoration: none;
}
#nav1 a:hover {
  color: #e8138b;
  text-decoration: overline;
}