Geek Answers Handbook

Why is a: hover overloaded in CSS?

If I have this CSS:

a:link { color: blue; } a:hover { color: red; } #someID a:link { color: black; }

Links under the identifier are always displayed in black when you hover over the mouse. I know that using an identifier gives a higher priority, however, I am not redefining the :hover selector, but only the :link selector, so should the inclined display not be displayed?

+4
source share
2 answers

The :link pseudo- :link applies to a link, even if you hover over it. Since the style with the identifier is more specific, it overrides the rest.

The only reason the style :hover overrides the style :link is because it comes later in the stylesheet. If you place them in the following order:

 a:hover { color: red; } a:link { color: blue; }

style :link is later in the stylesheet and redefines style :hover . The link remains blue when you hover over it.

To make a :hover style style for a black link, you must make it at least as specific as the :link style, and put it after it in the stylesheet:

 a:link { color: blue; } a:hover { color: red; } #someID a:link { color: black; } #someID a:hover { color: red; }
+10
source

There is a problem with the order, as described in W3Schools:

Note: a: hover MUST come after the link: and a: visited in the CSS definition in order to be effective!

Note: a: active MUST occur after: hover in the CSS definition to be effective !!

http://www.w3schools.com/CSS/css_pseudo_classes.asp

-2
source

More articles:


All Articles