Criando Rollovers sem Javascript

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:

Figura 3-4. Um indesejável efeito rollover no título do texto

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

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>