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

J'essaie de créer un effet plutôt simple sur un ensemble d'images. Quand une image n'a pas la souris dessus, j'aimerais qu'elle ait une bordure simple et grise. Quand il y a une image dessus, j'aimerais qu'il y ait une autre bordure "sélectionnée".Comment puis-je résoudre un problème dans IE où les bordures n'apparaissent pas lorsque la souris n'est pas survolée sur une image

Le CSS suivant fonctionne très bien 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 frontières ne semblent pas quand la souris ne planait sur l'image. Mon Google-fu me dit qu'il y a un bug dans IE qui cause ce problème. Malheureusement, je n'arrive pas à trouver un moyen de corriger ce bug.

Source

2008-09-15 Ken Wootton

Pouvez-vous poster du code HTML pour que nous puissions voir la structure? –

Essayez d'utiliser une couleur différente. Je ne suis pas sûr que IE comprend «gris» (à la place, utilisez «gris»).

Source

2008-09-15 15:37:13 hjdivad

IE a des problèmes avec la pseudo-classe: hover sur autre chose que des éléments d'ancrage, vous devez donc changer l'élément que le hover affecte sur l'ancre elle-même. Donc, si vous avez ajouté une classe comme « image » à votre point d'ancrage et modifié votre balisage à quelque chose comme ceci:

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

Vous pouvez ensuite modifier votre CSS pour ressembler à 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 désiré en plaçant la bordure sur l'ancre à la place de l'image. Tout comme une note, vous devrez peut-être quelque chose comme ce qui suit dans votre CSS pour éliminer la frontière par défaut de l'image:

.myImage a img { 
    border: none; 
}

Source

2008-09-15 15:45:54

Les travaux suivants dans IE7, IE6 et FF3. La clé était d'utiliser un: link: hover. IE6 a transformé l'élément A en un élément de bloc, ce qui explique pourquoi j'ai ajouté l'élément float pour rétrécir le contenu.

Notez qu'il est en mode Standards. Ne sait pas ce qui se passerait en mode bizarreries.

<!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>

Source

2008-09-15 15:50:22

Essayez d'utiliser l'arrière-plan au lieu de la frontière.

Ce n'est pas pareil mais ça marche dans IE (jetez un oeil au menu sur mon site: www.monex-finance.net).

Source

2008-09-15 15:52:43 Drejc

Ceci est une excellente suggestion et cela (qui fonctionne) m'a aidé à comprendre le vrai problème (mon nom de couleur). –

Dans mon expérience IE ne fonctionne pas bien avec des pseudo-classes. Je pense que la façon la plus universelle de gérer cela est d'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; 
}

Inline Javascript:

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

Source

2008-09-15 15:52:50 Jamie

<!--[if lt IE 7]> 
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> 
<![endif]-->

mis que dans votre tête, devrait corriger certains des bogues à savoir.

Source

2008-09-15 15:56:47

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

Répondre

Questions connexes