default a:hover overriding ones with classes ie6
Question
I have a default a:hover style as follows:
a:hover { color: black; font-size: 8pt }
However when trying to apply a class such as:
a.myclass:link { font-size: 14px }
a.myclass:hover { color: red }
without the font-size, then it changes font-size back to 8pt. Now this seems like how it should work however it doesn't happen in ie7, firefox, chrome. (It does work in IE6)
Update: In firebug it actually shows font-size on a:hover has been overridden, but by what i don't know.
Any one have any ideas?
Solution
I believe it's because a:hover
is more specific than a:link
.
If the original a:hover
font-size was unspecified, it would be inherited from a:link
. But since there is an a:hover
specification, a.myclass:hover
rather takes this value than the more "general" a.myclass:link
.
I read somewhere to think of the a
pseudo-classes as "love hate": :link
, :visited
, :hover
, :active
, one more specific than the previous. If you define something for a
or :link
, it should be inherited by all the following pseudo-classes. That value can be overridden though, and the specificity of the pseudo-class is more important than the order in which the styles are defined or what other "real" classes are attached to the link.
The reason it works differently in IE6 is that IE6 does it wrong, which shouldn't come as a surprise.
Differences in parsing (possibly backwards):
a:hover { font-size: 8pt }
a.myclass:link { font-size: 14px }
a.myclass:hover { }
How it should be:
Every
:hover
, regardless of.class
, is 8pt.
How IE6 understands it:
:hover
is not in the same class as.myclass:hover
. Since there's no size specified for.myclass:hover
, let's inherit from the next higher available pseudo-class in the same class, which is.myclass:link
. That makes.myclass:hover
14px.
Estimated lookup priorities:
Others IE6
a a
a.class a:link
a:link a:hover
a.class:link a.class
a:hover a.class:link
a.class:hover a.class:hover <-- Lookup starts here, goes up.
OTHER TIPS
thats because of the way the styles are being applied if you would expand the classes you would get:
a{ color:red; font-size:10pt;}
a:hover {font-size:8pt; color:black}
a.myclass{font-size:6pt;text-decoration:none;}
a.myclass:hover {color:red}
now if we expand this to show whats going on:
a.myclass{font-size:6pt;text-decoration:none;**color:red**} /* got the color from a - we overrode the font size */
a.myclass:hover {color:red;text-decoration:none;font-size:8pt} /* we got the text-decoration from a.myclass - but a:hover overrides myclass so we got the 8pt from there */
this effect is actually even weirder and more complicated if you start mixing all around effects (border/padding/margin) and side only ones (border-right;margin-top;padding-left) in such constellations.