Como posso corrigir um problema no IE em que as bordas não aparecem quando o mouse não passa sobre uma imagem?

StackOverflow https://stackoverflow.com/questions/63885

  •  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.

Foi útil?

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;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top