Inner border com CSS
Postado por: Pedro Rogério em
Sabem aquelas bordas que ficam em volta das imagens e quando você coloca o mouse sobre a imagem essa borda muda de cor, existe uma forma muito simples de se fazer isso, e o melhor de tudo é que funciona em todos os browsers. Faça uso do seguinte CSS:
<style type="text/css">
img { border: 5px solid #CCCC99; }
a:hover img { border-color: #FF0000; }
a:hover { color: #FF0000; }
</style>
E no HTML, você coloca o link na imagem que deseja que o efeito ocorra, por exemplo:
<a href="#" title=""><img src="flap.jpg" alt="" title="" /></a>
Está pronto o efeito, aí é só custoizar com as cores que você quiser, dêem uma olhada nesse exemplo funcionando.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Simples.., Funciona no IE ?
Simples e pratico eu gosto disso …100% …
Show!
Eu costuma fazer isso via Javascript.
Abraços
Boa dica mano. Eu tentei fazer algumas vezes sem o link, mas dava alguns probleminhas no ie, mas assim ficou legal.
Show… estava precisando um dia no trabalho, mas fiz de uma maneira mais complicado… boa dica, vou passar a utiliza-la…
Abraço
No IE 6 comigo tava dando pau, só resolveu quando adicionei a última linha
a:hover { color: #FF0000; }Boa dica!
Eu faço isso utilizando JavaScript, principalmente quando preciso fazer em campos de formulários.
Boa dica… vou tentar utilizá-la para colocar bordas em umas imagens com link num site que estou desenvolvendo em HTML, e ver se consigo manter bordas brancas, mantendo o uso da instrução border=”0″.
Valeu,
[ ]s,
Cara, como uso com class nele?
Abraços!
Uma dúvida:
Funciona com imagens de bordas arredondadas e fundo transparente?
Abraços.
@Robson,
Nunca testei, mas se quiser testar e passar aqui pra gente se funciona seria uma boa.
Isso não é INNER border… é só border hover…
ISSO é INNER border: http://labs.flog.co.nz/css-help/inner-border/demo.htm