Image hover css
Résolu
siniko44
Messages postés
172
Date d'inscription
Statut
Membre
Dernière intervention
-
siniko44 Messages postés 172 Date d'inscription Statut Membre Dernière intervention -
siniko44 Messages postés 172 Date d'inscription Statut Membre Dernière intervention -
Bonjour.
Voici mon code css:
.ger { background: url("../../images/ger.png")no-repeat; margin-top: 50px; margin-left: 300px; height: 240px; float: left; width: 135px; }
.ger:hover { background:url("../../images/gerf.png"); }
Mon problème, c'est que sous Google Chrome, aucun problème, l'image change sur survol du curseur. Mais sous IE ou firefox, elle reste a ''ger.png".
Merci !
Voici mon code css:
.ger { background: url("../../images/ger.png")no-repeat; margin-top: 50px; margin-left: 300px; height: 240px; float: left; width: 135px; }
.ger:hover { background:url("../../images/gerf.png"); }
Mon problème, c'est que sous Google Chrome, aucun problème, l'image change sur survol du curseur. Mais sous IE ou firefox, elle reste a ''ger.png".
Merci !
A voir également:
- Imagehover.css
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
- Légender une image - Guide
- Image gratuite - Guide
2 réponses
Salut !
Tentes en supprimant les (") dans les « url() ». Ajoutes aussi un espace arpès la parenthèse et avant le no-repeat :
Tentes en supprimant les (") dans les « url() ». Ajoutes aussi un espace arpès la parenthèse et avant le no-repeat :
.ger {
background: url(../../images/ger.png) no-repeat;
margin-top: 50px;
margin-left: 300px;
height: 240px;
float: left;
width: 135px;
}
.ger:hover {
background-image: url(../../images/gerf.png);
}
Dans le fond, c'est seulement avec les classes que ça ne fonctionne pas.
Tu as deux choix :
1. spécifier ton hover avec des IDs (#ger:hover)
2. le spécifier à partir du tag (div:hover)
Ce que tu peux faire, c'est t'arranger pour que tous tes ".ger" soient contenus dans une <div>. Ainsi, en supposant que ".ger" soit un "div", ça donnerait :
et tu spécifies ton CSS :
Essaie-le, dis-moi si ça marche ! ;)
Tu as deux choix :
1. spécifier ton hover avec des IDs (#ger:hover)
2. le spécifier à partir du tag (div:hover)
Ce que tu peux faire, c'est t'arranger pour que tous tes ".ger" soient contenus dans une <div>. Ainsi, en supposant que ".ger" soit un "div", ça donnerait :
<div class="gers"> <div>...</div> <div>...</div> <div>...</div> <div>...</div> </div>
et tu spécifies ton CSS :
div.gers div {
background: url(../../images/ger.png) no-repeat;
margin-top: 50px;
margin-left: 300px;
height: 240px;
float: left;
width: 135px;
}
div.gers div:hover {
background-image: url(../../images/gerf.png);
}
Essaie-le, dis-moi si ça marche ! ;)
J'encastre mon ger bien dans une valise <div class="ger"></div>. Je veut juste faire apparaître un hover et étant donné que cela marche sur un navigateur, je ne pense pas que il faudrait allé jusque là. De plus, Firfox ou IE m'affiche bien mon "ger.png", dans les bonne condition, mais l'hover ne change rien.
Si ça ne marche pas ça me semble très bizarre...
Je vais faire des tests de mon côté, voir ce que je peux trouver...