Search code examples
htmlcsshyperlinkvisited

CSS Visited Link Error

I have CSS made by me. I used it to make my nav link in green color. So I used a:visited. Then mouse over visited link won't make work hover properties. Please help me to make it green and red when hover. [sorry for my bad English]

CSS 

#nav {
    font-family:arial;
    font-size:20px;
}
#nav a:link {
    color:green;
    text-decoration:none;
}
#nav a:hover {
    color:red;
    text-decoration:none;
}
#nav a:visited {
    color:green;
}
#nav li:hover {
    font-family:arial;
    font-size:21px;
}
#nav li {
    float:right;
    margin: 5px;
}
#nav li#active {
    font-family:arial;
    font-color:red;
    font-size:20px;
    font-weight:bold;
}
#nav li#active:active {
    font-color:red;
}
Solution

  • Learn about the cascade.

    #nav a:hover and #nav a:visited are equally specific so the last one will override the first one.

    Put the :hover rule after the :visited rule if you want it to overwrite the other way around.