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

css

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

Best Solution

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