I'm trying to make it so my links remain white in colour but when the mouse hovers on them they turn grey and have an underline but it isn't working, the link works but it just stays white, here's my CSS code:
a:hover {
text-decoration: underline;
color:#666666
}
a:visited {
text-decoration: none;
color:#FFFFFF
}
a:link {
text-decoration: none;
color:#FFFFFF
}
To clarify icedwater's answer a little, psuedoclasses such as :hover, :link and so on all have the same specificity as classes, and more importantly they have the same specificity as each other.
I'm with you, personally I think it'd be good if :visited implied !important since it's a user-controlled state, but that would make it more complicated so... yeah. Just rearrange your groups - in fact, the order you need is the exact opposite to the one you have now.
:hover was as specific as :link. I just shifted the last to the top. This order also leaves the visited links white, but you get my +1 for clarifying.
Commented
Jul 4, 2013 at 3:26
:hover to be last, then it will also affect visited links. You can even define :hover:visited if you want a different colour for when a link is both visited and hovered.
Commented
Jul 4, 2013 at 3:28
the hover properties set out for <a> are defined for the normal state (which means that it covers both visited and unvisited links) however you have defined a:visited and a:link as well (and also mentioned it after the :hover only declaration), the css parser will instead give the properties of these definitions higher precedence.
Make it more specific by changing:
a:hover {
text-decoration: underline;
color:#666666
}
to
a:hover, a:visited:hover, a:link:hover {
text-decoration: underline;
color:#666666
}
A demonstration @ http://jsfiddle.net/Wz6aR/
To alter the precedence change the declaration order to:
a:visited {
text-decoration: none;
color:#FFFFFF
}
a:link {
text-decoration: none;
color:#FFFFFF
}
a:hover {
text-decoration: underline;
color:#666666
}
A demonstration @ http://jsfiddle.net/9cGPv/
You should order link pseudo classes like this:
a {...}
a:link {...}
a:visited {...}
a:focus {...}
a:hover {...}
a:active {...}
As CSS is cascading, the last rule overwrites the ones before. If you shift the a:link definition which is more general up, it should work fine. This is of course the most minimal change that happens to work.
You can track down such issues easily by examining the styles in Chrome devtools. Did you do that?
Right-click on the element you're worried about and choose "Inspect element".
The style tab will open. Next to element.style, over on the right, you'll see three icons. The middle one is a dotted rectangle with a little arrow.
Click on that and a pane will open. Set the :hover state. See screenshot below.
Now examine the rules being applied. You will notice that the
properties being set by your :hover rule are crossed out. This means
that they are being overidden. You will also see that the properties in
your :link rule are the ones being applied. Why is that? Because,
as other posters have pointed out, that rule comes later in your CSS
and thus takes precedence.
A quick google of "hover css" would have given you the relevant page on MDN, always an excellent resource, which states in the very first paragraph:
The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active.
SO is not a crowd-sourced debugging forum. Learn to debug for yourself.
