Mon Hover ne s'applique pas à toute ma classe

Résolu/Fermé
the_bluelephant - Modifié le 17 août 2018 à 23:12
 the_bluelephant - 20 août 2018 à 11:58
Bonjour,

Ma pauvre petite âme de débutante en la matière est à bout de ses capacités !

Je cherche a remplacer une image+forme+texte par une image (qui aura accessoirement du texte dessus également) - J'utilise donc "hover", seulement ce dernier ne prend pas en compte tous les élèments de ma classe "imagetotale" et ne change donc que l'image sans faire disparaitre le texte à l'origine sur l'image.

Alors ... pourquoi ?!!! Comment faire ?!


Mon HTML :
<body>
    <div class=imagetotale>
      
      <img src="http://images.innoveduc.fr/integration_gandalf.png" alt="gandalf"/>
    
      <div class=carre></div> 
    
      <span class=rewards>
          <p> Rewards <span class=mille>1000</span> <br/>Golden coin</p>
          <h3> Gandalf </h3>
     </div>  


Et mon CSS :

img
{
 opacity:0.6;
}

.imagetotale:hover
{
 background-image:url("http://images.innoveduc.fr/integration_gandalf.png");
 background-repeat:no-repeat;
}

.rewards
{
  font-family:Arial;
  font-size:50px;
  position:absolute; top:-25px;left:95px; 
  text-align:center;
}

.carre {
 width:450px;
 height:130px;
 background:white;
 Position: absolute; top:20px; left:35px; border-radius: 20px;
  opacity:0.6;
}


.mille
{
  color:darkorange;
}

h3
{
  font-family:Arial;
  font-size:90px;
  color:white;
  position:relative; top:100px; left:-20px;
}



Merci d'avance pour vos précieux conseils :)


EDIT : correction des balises de code.
Explications disponibles ici :

https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

1 réponse

xmediacreation.com Messages postés 49 Date d'inscription mercredi 6 juin 2018 Statut Membre Dernière intervention 11 septembre 2018 8
19 août 2018 à 10:34
Avec un truc comme :

.imagetotale:hover > .rewards{display:none;}
0
the_bluelephant
20 août 2018 à 11:58
Merci beaucoup !!
0