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

I think you should at least consider the flow of User Interaction on links (or buttons).

Usually,

1. :link has always been the default (untouched),
2. Then when a User points to the button, then that is where :hover comes into play.
3. Once a User points to the link or button, then he/she will click, that is where :active comes in.

That is the standard sequence of how we interact with links (or buttons). With the exception of :visited, where the result is only obvious when the User has previously pressed the link.

It would be really helpful if you keep in mind the mnemonic: ' L o V e H A t e ' when dealing on links (except for :visited, which doesn't work for buttons).

However, if you really want to do an override, say, you want to change the color of a link that was already visited on active state, you can do something like:

a:visited:active {
     color: red;   
}

But the bottom line is, avoid changing the standard sequence if it's not necessary.