Existe alguma maneira de fazer o oposto de :hover
usar apenas CSS? Como em: se :hover
for on Mouse Enter
, há um CSS equivalente a on Mouse Leave
?
Exemplo:
Eu tenho um menu HTML usando itens de lista. Quando passo o mouse sobre um dos itens, há uma animação em cores CSS de #999
a black
. Como posso criar o efeito oposto quando o mouse sai da área do item, com uma animação de black
a #999
?
(Lembre-se de que não desejo responder apenas a este exemplo, mas a toda a questão do "oposto de :hover
".)
:hover
é simplesmente :not(:hover)
; entretanto, não:hover
é sinônimo de nem igual a . CSS não tem nenhum conceito de eventos DOM. onmouseenter
:not(:hover)
onmouseleave
:hover
significa simplesmente "um elemento que tem um ponteiro do mouse sobre ele". Não indica se o ponteiro do mouse fez a transição de outro elemento para este elemento. Significa apenas que o ponteiro do mouse está atualmente no elemento.
:not(:hover)
será aplicado. Aqui está uma demonstração: jsfiddle.net/BoltClock/rghBX