Image hover css

Résolu/Fermé

siniko44 Messages postés 172 Date d'inscription vendredi 30 juillet 2010 Statut Membre Dernière intervention 29 novembre 2013 - 5 nov. 2010 à 18:17
siniko44 Messages postés 172 Date d'inscription vendredi 30 juillet 2010 Statut Membre Dernière intervention 29 novembre 2013 - 5 nov. 2010 à 19:46

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 !

A voir également:

Imagehover.css
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Image iso windows 10 - Guide
Faststone image viewer - Télécharger - Visionnage & Diaporama
Comment agrandir une image - Guide

2 réponses

Réponse 1 / 2

le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 057
5 nov. 2010 à 18:30

Salut !

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);
}

siniko44 Messages postés 172 Date d'inscription vendredi 30 juillet 2010 Statut Membre Dernière intervention 29 novembre 2013 17
5 nov. 2010 à 18:58

Tout cela ne change rien :s

coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
Modifié par coeus le 5/11/2010 à 19:22

As-tu bien changé l'attribut background pour un background-image dans ton .ger:hover ?
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...

siniko44 Messages postés 172 Date d'inscription vendredi 30 juillet 2010 Statut Membre Dernière intervention 29 novembre 2013 17
5 nov. 2010 à 19:28

Nop, ça ne change rien

Réponse 2 / 2

coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
Modifié par coeus le 5/11/2010 à 19:34

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 :

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

siniko44 Messages postés 172 Date d'inscription vendredi 30 juillet 2010 Statut Membre Dernière intervention 29 novembre 2013 17
5 nov. 2010 à 19:40

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.

coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
5 nov. 2010 à 19:45

Le problème c'est que tu ne peux pas déclarer un hover sur une classe, seulement sur un ID ou un tag. Fouille-moi pourquoi IE et Firefox agissent comme ça...
Mais je viens juste d'essayer, et déclarer le hover sur un tag ou sur un ID, ça marche, au moins dans Firefox.

siniko44 Messages postés 172 Date d'inscription vendredi 30 juillet 2010 Statut Membre Dernière intervention 29 novembre 2013 17
5 nov. 2010 à 19:46

Ah, rectification : j'ai mit mon code en div ID.
#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"); }

<div id="ger"></div>

Sa fonctionne, merci x).

Discussions similaires