Todos já usaram pseudoelementos CSS para criar efeitos de foco de link :hover</code> or attach an icon or text to an element using :before</code> or :after</code> but the fun really starts when you start using multiple pseudo elements in combination.
Considere, por exemplo, uma situação em que você deseja destacar um elemento em uma lista:
- Entrada a
- Entrada b
- Entrada c
- Entrada d
No estado normal, você quer todos os elementos visíveis – o que significa opacity: 1.0;</code>. When your mouse hovers over one of the elements in the list, however, you'd like all the other elements to fade away - emphasis should be placed on the highlighted element.
No passado, isso seria feito com algum javascript. Dispare eventos toda vez que uma entrada for pairada. Qualquer elemento que não fosse pairado desapareceria, o elemento pairado desapareceria.
Alternativamente, você poderia fazer alguns testes de acerto inteligentes – se o cursor estiver pairando sobre a lista, desaparecerá todos os elementos que falharem no teste de acerto.
Agora, digite CSS puro:
ul > li {
opacity: 1.0;
}
ul:hover > li:not(:hover) {
opacity: 0.5;
}O que está acontecendo aqui?
Em nossa primeira declaração, estamos garantindo que todos os elementos, em seu estado normal, estão desbotados.
OK, não muito até agora. Mas agora a reviravolta …
Em nossa segunda declaração, afirmamos que, se o usuário passar o mouse sobre a lista, selecione todos os elementos que não estão sendo passados e esmaeça-os.
Quando a lista é carregada, todos os elementos aparecem esmaecidos. Quando o usuário passa o mouse sobre a lista, todos os elementos desaparecem. Quando o usuário passa o mouse sobre um elemento, ele aparece gradualmente. Quando o usuário sai da lista, todos os elementos aparecem novamente. Um efeito visual simples e agradável tornado possível pela combinação de 3 poderosas pseudo tags CSS e 3 linhas de código.
Claro, aqui está o violino:
http://jsfiddle.net/3hz4d/