CSS: Pb de rollover

Question

Salut, J'éprouve un pb de rollover. Voici le code que j'ai employé, mais il ne fonctionne pas. HTML:

CSS: a.ro { background-image: url('Accueil_1.gif'); background-repeat: no-repeat; } a.ro:hover { background-image: url('Accueil2.gif'); background-repeat: no-repeat; } Merci !

Gihef · Answer

Bonjour,

Essaye après avoir supprimé<img src="Accueil_1.gif"> ?

jakkihm · Answer

Gihef, 
Si je fais ce que tu dis, l'image du bouton disparaît complètement.

Ssylvainsab · Answer

Bonsoir.

Ce doit être parce que le a ne prend pas de place quand il n'y a aucun texte.
Essaye ce code CSS :
(en enlevant la balise img).ro{background:url('Accueil_1.gif') no-repeat center}
.ro:hover{background:url('Accueil_2.gif') no-repeat center}
.ro,.ro:hover{display:block;margin:0;padding:0}

jakkihm · Answer

Sylvain,
Merci pour ton coup de main, mais toujours pas d'image visible avec le code que tu m'as fourni.

Ssylvainsab · Answer

Même en enlevant la balise img du code xhtml ?

jakkihm · Answer

Sylvain,
Afin d'être sûr que nous nous comprenons, voici mon code à présent:

HTML:

<a href="#" class="ro"></a>

CSS:

.ro { background:url('Accueil_1.gif') no-repeat center }
.ro:hover { background:url('Accueil_2.gif') no-repeat center }
.ro, .ro:hover { display:block; margin:0; padding:0 }

Ssylvainsab · Answer

Essaye en mettant ca à la dernière ligne :
.ro,.ro:hover{display:block;margin:0;padding:0;width:largeurdelimagepx;height:hauteurdelimagepx}
(en supposant que Accueil 1_l et 2.gif fassent la même taille)
Par exemple si les images font 10 pixels de large et 20 de long :
.ro,.ro:hover{....width:10px;height:20px}

CSS: Pb de rollover

7 réponses

Votre réponse

Discussions similaires