Por que a pseudo classe suspensa substitui a pseudo classe ativa
O título basicamente diz tud
Suponha que eu tenha um elemento no qual desejo alterar a cor:hover
, mas, enquanto clicado, quero que volte à sua cor original. Então, eu tentei o seguinte:
a:link, a:visited, a:active {
background: red;
}
a:hover {
background: green;
}
Como se vê, isso não funciona. Depois de muito coçar a cabeça, percebi que o:hover
state estava substituindo o:active
Estado. Isso foi facilmente resolvido com isso:
a:link, a:visited {
background: green;
}
a:hover {
background: red;
}
a:active {
background: green;
}
(Eu poderia combinar a 1ª regra com a 3ª
Aqui está o violino:http: //jsfiddle.net/V5FUy
Minha pergunta: este é o comportamento esperado? Tanto quanto eu entendo isso, o:active
state deve sempre substituir o:hover
state, já que o:active
statequas esteja sempre acompanhado do:hover
Estado