Clever Geek Handbook

Need CSS text color for: hover over: visited

I have a css code that shows the background color on hover. White text on blue background.

Otherwise, if there is no hover, the text will be 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 make the color of the hover text take precedence?

a:link{
    color:#3399cc;
}

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


source to share


5 answers


I think that specifying the style data for :hover

after the style data for is :visited

enough to do the trick:



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


source


If I'm not mistaken, all you have to do is switch the order by placing the: hover class after the: visted class in your stylesheet



+4


source


LoVeHAte = link visited, hung, active

+3


source


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

This assumes you are using the LVHA rule which refers to the order of the pseudo-classes among the CSS rules. Some easily recognizable abbreviations appear in the comments when ordering (adding :focus

to the package):

  • L ord V ader F ormer H andle, A nakin
  • L ord V ader F roze H ans A ss li>
+2


source


One method is to use the keyword !important

:

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

This ensures that it :hover

takes precedence.

Might also work to replace yours a:visited hover

, which means element <hover>

(doesn't exist!), With a:visited:hover

.

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

-1


source






More articles:


All Articles