Problema
Você quer criar um simples efeito rollover sem usar Javascript para trocar imagens.
Solução
Use as pseudo-classes :hover e :active para criar o rollover:
a:link {color: #777;text-decoration: none;}a:visited {
color: #333;
text-decoration: none;
}
a:link:hover, a:visited:hover {
color: #777;
background-color: #ccc;
}
a:link:active, a:visited:active {
color: #ccc;
background-color: #ccc;
}
A pseudo classe :hover se parece com o evento comum do JavaScript onmouseover . Ao invés de executar uma função no JavaScript, quando o usuário passa o mouse sobre um link com :hover, uma diferente escolha de estilo é aplicada para o link.
Com o seletor tendo a mesma especificidade, seletores escritos fora de ordem podem parar um dos estilos de aparecerem. Eviste este problema comum listando os seletores na ordem: link, visited, hove, active . O dispositivo de memória comumente usado para lembrar a ordem é “Love/Hate”(amor/ódio).
Ainda que :hover e :active poderem ser aplicados para qualquer elemento, eles são mais usados em links. Note que o suporte do browser para :hover e :active no Netscape Navigator 4 é inexistente. Também, o Opera 4 não suporta :hover.
Nesta solução, as duas pseudo classes certificam que o efeito rollover ocorra somente em links ancorados. Sem :hover e :active, browsers modernos poderiam legalmente aplicar os efeitos rollover em qualquer elemento ancorado, como mostrado neste código e na Figura 3-4:
E depois?
O problema é que o hover para poder simular o Javascript de maneira correta, teria que oferecer suporte a todos elementos, até mesmo uma div, mas na verdade no IE 6 fica devendo. O único suporte é para o elemento a, que simboliza o link. Assim ainda será necessário usar script para este fim, como já mostrei e você pode ver com seus próprios olhos em todo o site.
Veja também
As especificações CSS 2.1 para :active e :hover em http://www.w3.org/TR/CSS21/selector.html#x36; uma explicação sobre links e especificidade em em http://www.meyerweb.com/eric/css/link-specificity.html.
Fonte: CSS Cookbook
