Rollover com border sem problemas

Um problema típico quando desejamos fazer um rollover a um elemento utilizando o atributo CSS border e a solução para que não nos desenquadre o desenho.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 03/6/09
Valorize este artigo:
Os rollovers são os efeitos que se mostram na hora de colocar o mouse sobre um elemento quente, ou seja, um elemento sobre o qual podemos clicar. Os rollovers são interessantes porque oferecem ao usuário um sinal para que este saiba que pode clicar para ver alguma informação.

À princípio os rollovers se faziam com Javascript, porém há tempo que não faz falta nenhuma programação para realizar um rollover, como já explicamos no artigo Realizar um rollover só com CSS, que permite inclusive utilizando imagens para realizar o efeito do rollover. Para isso utilizamos o pseudo-element hover, que permite especificar um estilo quando o usuário coloca o mouse sobre um elemento.

O mais certo é que, se estiver lendo este artigo de CriarWeb.com, já saiba o que é um rollover e talvez tenha um problema ao trabalhar com rollovers do tipo borda. Com CSS podemos criar um efeito de link quente através de uma borda que colocamos em um elemento HTML. Na hora de passar o mouse, pode-se criar o rollover colocando uma borda no elemento. O problema é que essa borda às vezes nos desenquadra o desenho que havíamos composto com tanto trabalho por nossa parte.

Vejamos primeiro um par de exemplos de rollover com bordas, que servirão para entender bem o que é que queremos dizer e que problema pode nos dar este efeito em nosso desenho.

Temos dois exemplos, que criamos para ilustrar primeiro o problema e a solução proposta.

No exemplo problemático vemos que ao passar o mouse pelas imagens, se desenquadra o desenho, criando uns espaços em branco pouco desejáveis entre as imagens da barra de ferramentas.

Nesse primeiro exemplo se utilizou a seguinte declaração de estilos, que seria a mais fácil de adotar em um primeiro momento.

#exemplo-problema a img, #exemplo-problema a {
   border: none; float: left;
}
#exemplo-problema a:hover {
   border: 3px solid #ff8800;
}

No entanto, temos um segundo exemplo que tem um comportamento muito melhor, já que com CSS configuramos a barra de ferramentas para que a borda que aparece nas imagens para fazer o rollover apareça por dentro da imagem ao invés de por fora.

A solução passa por colocar uma margem negativa à imagem sobre a que queremos colocar a borda. A margem tem que ser do mesmo tamanho que a borda que tiver definida na pseudo-clase hover.

#borda-interior a img, #borda-interior a {
   border: none;
   overflow: hidden;
   float: left;
}
#borda-interior a:hover {
   border: 3px solid #ffcc33;
}
#borda-interior a:hover img {
   margin: -3px;
}

Este exemplo foi tirado de um artigo em inglês publicado no site CSS Tricks, onde ademais podemos ver uma segunda solução que não comentei aqui porque não me funciona em Explorer. Espero que, se tinha efeitos pouco desejáveis com a borda dos elementos ao fazer um hover, com esta técnica possa solucioná-los.

Novamente, deixo o link ao exemplo de rollover CSS baseado em bordas.





Comentários do artigo
Foram enviados 2 comentários ao artigo
2 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato