CODEWITHSUNDEEP
htmlcsshoverhyperlink
Colin Chapman
Colin Chapman

Reputation: 13

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;
}

Upvotes: 1

Views: 122

Answers (3)

Jonas
Jonas

Reputation: 44

This should do the trick...

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

Upvotes: 1

Delan Azabani
Delan Azabani

Reputation: 81384

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.

Upvotes: 2

Keltex
Keltex

Reputation: 26426

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

Upvotes: 5

Related Questions