Image hover css

Résolu
siniko44 -  
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 !

2 réponses

  1.  le hollandais volant
    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);
}
    0
    1. siniko44 Auteur
      Tout cela ne change rien :s
      0
    2. coeus
      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...
      0
    3. siniko44 Auteur
      Nop, ça ne change rien
      0
  2. coeus
    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 ! ;)
    0
    1. siniko44 Auteur
      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.
      0
    2. coeus
      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.
      0
    3. siniko44 Auteur
      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).
      0

Discussions similaires

Retrouver l'image originale d'une photo modifiée
Raven

10 réponses
Comment recadrer une image avec Inkscape
infofeet

13 réponses