Comment puis-je résoudre un problème dans IE où les frontières n'apparaissent pas lorsque la souris n'est pas survolée sur une image

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

  •  09-06-2019
  •  | 
  •  

Question

J'essaie de créer un effet assez simple sur un ensemble d'images. Lorsqu'une image n'est pas survolée par la souris, j'aimerais qu'elle présente une simple bordure grise. Quand il y a une image dessus, j'aimerais qu'il ait une bordure différente, "sélectionnée",

.

Le code CSS suivant fonctionne parfaitement dans Firefox: 

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

Cependant, dans IE, les bordures n'apparaissent pas lorsque la souris n'est pas survolée sur l'image. Mon Google-fu me dit qu'il y a un bogue dans IE qui est à l'origine de ce problème. Malheureusement, je n'arrive pas à trouver un moyen de résoudre ce problème.

Était-ce utile?

La solution

Essayez d’utiliser une couleur différente. Je ne suis pas sûr que IE comprenne "gris" (utilisez plutôt "gris").

Autres conseils

Ce qui suit fonctionne dans IE7, IE6 et FF3. La clé était d'utiliser un lien: hover. IE6 a transformé l’élément A en élément de bloc. C’est la raison pour laquelle j’ai ajouté le composant float pour rétrécir le contenu.

Notez qu'il est en mode standard. Je ne sais pas ce qui se passerait en mode 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>

D'après mon expérience, IE ne fonctionne pas bien avec les pseudo-classes. Je pense que le moyen le plus universel de gérer cela consiste à utiliser Javascript pour appliquer la classe CSS à l'élément.

CSS: 

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

Javascript en ligne: 

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

Essayez d’utiliser le fond au lieu de la bordure .

Ce n'est pas la même chose mais cela fonctionne dans IE (regardez le menu sur mon 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]-->

mettez cela dans votre en-tête, devrait corriger certains des bogues, par exemple.

IE a des problèmes avec la pseudo-classe: hover sur autre chose que des éléments d'ancrage. Vous devez donc modifier l'élément affecté par le survol à l'ancre elle-même. Donc, si vous avez ajouté une classe telle que "image" à votre ancre et modifié votre balisage à quelque chose comme ça: 

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

Vous pouvez ensuite modifier votre code CSS afin qu'il ressemble à ceci: 

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

Qui devrait imiter l’effet souhaité en plaçant la bordure sur l’ancre au lieu de l’image. Juste comme note, vous aurez peut-être besoin de quelque chose comme ceci dans votre CSS pour éliminer la bordure par défaut de l'image: 

.myImage a img {
    border: none;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top