Why does the hover pseudo-class override the active pseudo-class

Question

The title basically says it all.

Suppose I have an element which I want to change color on :hover, but while clicked, I want it to swit

Answer 1

This is the expected behavior in so far as most people always place the :hover pseudo-class at the end of the group of rules.

Order of declaration matters with pseudo-classes (see more here: http://reference.sitepoint.com/css/pseudoclasses), so the final rules get precedence, as with other rules in CSS.

For most people, I think the desired behavior:

a:link {
  ⋮ declarations
}
a:visited {
  ⋮ declarations
}
a:hover {
  ⋮ declarations
}

Since the :active is not so useful it is left out... or combined with a:link and a:visited... and then it is overridden by a:hover

W3C spells it out here:

Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

Even W3schools gets this one right:

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

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

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