¿Cómo puedo solucionar un problema en IE donde los bordes no aparecen cuando el mouse no está sobre una imagen?

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

  •  09-06-2019
  •  | 
  •  

Pregunta

Estoy intentando crear un efecto bastante simple en un conjunto de imágenes.Cuando una imagen no tiene el mouse sobre ella, me gustaría que tuviera un borde gris simple.Cuando tenga una imagen encima, me gustaría que tuviera un borde diferente, "seleccionado".

El siguiente CSS funciona muy bien en Firefox:

.myImage a img
{
    border: 1px solid grey;
    padding: 3px;
}
.myImage a:hover img
{
    border: 3px solid blue;
    padding: 1px;
}

Sin embargo, en IE, los bordes no aparecen cuando no se coloca el mouse sobre la imagen.Mi Google-fu me dice que hay un error en IE que está causando este problema.Desafortunadamente, parece que no puedo encontrar una manera de solucionar ese error.

¿Fue útil?

Solución

Intenta usar un color diferente.No estoy seguro de que IE entienda "gris" (en su lugar, utilice "gris").

Otros consejos

Lo siguiente funciona en IE7, IE6 y FF3.La clave era utilizar a:link:hover.IE6 convirtió el elemento A en un elemento de bloque, por lo que agregué elementos flotantes para envolver el contenido.

Tenga en cuenta que está en modo Estándar.No sé qué pasaría en el 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>

En mi experiencia, IE no funciona bien con pseudoclases.Creo que la forma más universal de manejar esto es usar Javascript para aplicar la clase CSS al elemento.

CSS:

.standard_border
{
    border: 1px solid grey;
    padding: 3px;
}
.hover_border
{
    border: 3px solid blue;
    padding: 1px;
}

Javascript en línea:

<img src="image.jpg" alt="" class="standard_border" onmouseover="this.className='hover_border'" onmouseout="this.className='standard_border'" />

Intenta usar el fondo en vez de borde.

No es lo mismo pero funciona en IE (mira el menú en mi sitio: 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]-->

Pon eso en tu encabezado, debería corregir algunos de los errores de es decir.

IE tiene problemas con la pseudoclase :hover en cualquier cosa que no sean elementos de anclaje, por lo que es necesario cambiar el elemento que afecta el desplazamiento al anclaje mismo.Entonces, si agregaste una clase como "imagen" a tu ancla y modificaste tu marcado a algo como esto:

<div class="myImage"><a href="..." class="image"><img .../></a></div>

Luego podrías modificar tu CSS para que se vea así:

.myImage a.image
{
    border: 1px solid grey;
    padding: 3px;
}
.myImage a.image:hover
{
    border: 3px solid blue;
    padding: 1px;
}

Lo cual debería imitar el efecto deseado colocando el borde en el ancla en lugar de la imagen.Solo como nota, es posible que necesites algo como lo siguiente en tu CSS para eliminar el borde predeterminado de la imagen:

.myImage a img {
    border: none;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top