Need CSS text color for a:hover to take precedence over a:visited

Question

I have some css code that shows a background color on hover. The text is white on a blue background.

Otherwise, if there is no hover, the text is blue with a white background. However, when the link has been visited, the text remains blue with a blue background on hover.

How can I force the hover text color to take precedence?

a:link{
    color:#3399cc;
}

a:hover{
    background-color:#3399cc;
    color:#ffffff;
}
a:visited{
    color:#3399cc;
}
a:active{
    color:#3399cc;
}

Answer 1

if I'm not mistaken, all you have to do is switch the order, put the :hover class after the :visted class in your style sheet

Answer 2

I think specifying the style data for :hover after the style data for :visited is enough to do the trick:

a:visited{  
    color:#3399cc;  
}  
a:hover{  
    background-color:#3399cc;  
    color:#ffffff;  
}

Answer 3

One method would be to use the !important keyword:

a:visited
{
    color:#3399cc;
}
a:hover
{
    background-color: #3399cc;
    color: #ffffff !important;
}

That will make sure that the :hover takes precedence.

It might also work to replace your a:visited hover, which means a <hover> element (doesn't exist!), with a:visited:hover.

As already mentioned, changing the order of the styles sshould be a sufficient fix: later definitions take precedence over earlier ones.

Answer 4

See Eric Meyer's article on the subject: Ordering The Link States

It is suggested, that you use the “link-visited-hover-active” LVHA-rule, referring to the order of the pseudo-classes among the CSS rules. The comments bring up some easily recognizable acronyms on the ordering (adding :focus into the pack):

• Lord Vader's Former Handle, Anakin
• Lord Vader Froze Hans Ass

Answer 5

LoVeHAte = link,visited,hover,active