28219 sujets

CSS et mise en forme, CSS3

Bonjour,

Après moults recherches (en vain) sur un problème qui m'a l'air pourtant assez courant, je me décide à poster ici.

Pour résumer simplement, j'ai un lien <a> avec une image dedant.

Au survol du lien avec a:hover, je veux simplement changer la couleur d'arrière-plan de ce lien avec par exemple background-color: blue;


<a href="truc.html">
    <img src="bidule.jpg" alt="Mon image" />
</a>



a {
   display: block;
   width: 200px;
   height: 200px;
   background-color: red;
}
a:hover {
   background-color: blue;
}
img {
   width: 100px;
   height: 100px;
}


Le problème que je rencontre (uniquement sous IE, rien sous FF/Opéra), c'est quand la souris passe sur la bordure de l'image, le a:hover n'est plus respecté pendant une fraction de seconde (et donc l'arrière-plan redevient rouge pendant 1/10e de seconde), ce qui produit un effet de scintillement assez désagréable...

Le problème apparaît également en remplaçant l'image par un tableau ou n'importe quoi qui a une bordure : à chaque passage de la souris sur la bordure du tableau ou de l'une de ses cellules, toujours le même problème de scintillement... Smiley decu :


<a href="truc.html">
    <table border="1">
       <tr>
         <td></td>
         ...
       </tr>
    </table>
    blabla
    ...
</a>


J'ai consulté cette page, ce sujet mais rien n'y fait...

Quelqu'un connaît-il une combine pour éviter ce scintillement ?

Merci d'avance Smiley cligne
Bonjour,

Technique de guérilla : ne pas utiliser de bordure ? Smiley cligne

Sinon, l'article et le sujet que tu cites concernent les images de fond et le rechargement systématique des images de fond via le serveur. Pas grand chose à voir avec ton problème, à vue de nez.