Webpoint

Weblosofia com CSS, Jquery, Javascript, Ajax, PHP etc.

por Alexandre Magno

Home
Contato

Criando Rollovers sem Javascript

Postado em Setembro 08th, 2007 por Alexandre Magno

Receitas CSS

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.