Como posso corrigir um problema no IE em que as bordas não aparecem quando o mouse não passa sobre uma imagem?
-
09-06-2019 - |
Pergunta
Estou tentando criar um efeito bastante simples em um conjunto de imagens.Quando uma imagem não tem o mouse sobre ela, gostaria que ela tivesse uma borda simples e cinza.Quando houver uma imagem sobre ela, gostaria que tivesse uma borda diferente, "selecionada".
O seguinte CSS funciona muito bem no Firefox:
.myImage a img
{
border: 1px solid grey;
padding: 3px;
}
.myImage a:hover img
{
border: 3px solid blue;
padding: 1px;
}
No entanto, no IE, as bordas não aparecem quando o mouse não passa sobre a imagem.Meu Google-fu me diz que há um bug no IE que está causando esse problema.Infelizmente, não consigo localizar uma maneira de corrigir esse bug.
Solução
Tente usar uma cor diferente.Não tenho certeza se o IE entende 'cinza' (em vez disso, use 'cinza').
Outras dicas
O seguinte funciona no IE7, IE6 e FF3.A chave era usar a:link:hover.O IE6 transformou o elemento A em um elemento de bloco, e é por isso que adicionei o material float para reduzir o conteúdo.
Observe que está no modo Padrões.Não sei o que aconteceria no modo quirks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
a, a:visited, a:link, a *, a:visited *, a:link * { border: 0; }
.myImage a
{
float: left;
clear: both;
border: 0;
margin: 3px;
padding: 1px;
}
.myImage a:link:hover
{
float: left;
clear: both;
border: 3px solid blue;
padding: 1px;
margin: 0;
display:block;
}
</style>
</head>
<body>
<div class="myImage"><a href="#"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></a></div>
<div class="myImage"><a href="#"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></a></div>
</body>
</html>
Na minha experiência, o IE não funciona bem com pseudoclasses.Acho que a maneira mais universal de lidar com isso é usar Javascript para aplicar a classe CSS ao elemento.
CSS:
.standard_border
{
border: 1px solid grey;
padding: 3px;
}
.hover_border
{
border: 3px solid blue;
padding: 1px;
}
Javascript embutido:
<img src="image.jpg" alt="" class="standard_border" onmouseover="this.className='hover_border'" onmouseout="this.className='standard_border'" />
Tente usar o fundo ao invés de fronteira.
Não é a mesma coisa, mas funciona no IE (dê uma olhada no menu do meu site: www.monex-finance.net).
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
coloque isso no seu cabeçalho, deve corrigir alguns dos bugs.
O IE tem problemas com a pseudoclasse :hover em qualquer coisa que não seja elementos âncora, então você precisa alterar o elemento que o foco está afetando para a própria âncora.Então, se você adicionou uma classe como "imagem" à sua âncora e alterou sua marcação para algo assim:
<div class="myImage"><a href="..." class="image"><img .../></a></div>
Você poderia então alterar seu CSS para ficar assim:
.myImage a.image
{
border: 1px solid grey;
padding: 3px;
}
.myImage a.image:hover
{
border: 3px solid blue;
padding: 1px;
}
Que deve imitar o efeito desejado colocando a borda na âncora em vez da imagem.Apenas como observação, você pode precisar de algo como o seguinte em seu CSS para eliminar a borda padrão da imagem:
.myImage a img {
border: none;
}