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 switch back to its original color. So, I've tried this:

a:link, a:visited, a:active {     background: red; } a:hover {     background: green; } 

As it turns out, this doesn't work. After a lot of head-scratching, I realized that the :hover state was overriding the :active state. This was easily solved by this:

a:link, a:visited {     background: green; } a:hover {     background: red; } a:active {     background: green; } 

(I could combine the 1st rule with the 3rd one).

Here's the fiddle: http://jsfiddle.net/V5FUy/

---

My question: is this the expected behavior? As far as I understand this, the :active state should always override the :hover state, since the :active state will almost always be accompanied with the :hover state.

Answer 1

yes this is expected behavior,

lets take a look at another example. just adding two classes,

<ul> <li class="item first">item</li> <li class="item">item</li> <li class="item">item</li> <li class="item">item</li> <li class="item last">item</li> </ul> 

here the class first also comes together with the class item. but if we declare our css in the wrong order that would not give the wanted behavior

.first { background: blue; } .item { background: red; } 

as you can see, the last matching selector will be used. it is the same as your example, no mather what is more logic, the 2 pseudo-classes are concidered equal, thus the same rules apply the last matching defenition wins.

edit

pseudoclasses are equals, it is the one defined last that wins! here is a jsFiddle that proves my point :link defined after :hover, :link wins (test) so, your statement of :hover overriding :link is wrong, its just the same like with :active, its all about the order.