Rollover com border sem problemas

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.

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.

Fonte: http://www.criarweb.com/artigos/rollover-com-border-sem-problemas.html

Deixe um comentário