25889 sujets

CSS et mise en forme, CSS3

Bonjour
Je me bats avec une peudo-class "checked". Je cherche à faire passer ma classe vignette en opacity 0 lorsque ma check box est checked. Mon code fonctionne avec la classe "wordcloudbas" mais pas avec la classe "vignette". J'avoue que vos avis seraient les bienvenus. Voici mon code allégé (j'ai laisse le wordcloudbas qui fonctionne, lui)


  <input type="checkbox" id="check_1" name="check" class="r_check">
  <label for="check_1" class="on_check">
    <img class="vignette" src="entree.jpg" alt="s_image_001.jpg">
  </label>
  <img class="wordcloudbas" src="wordcloudbas.png" alt="">




.vignette{
width : 400px;
height : 50px;
margin-left : 312px;
margin-top : 750px;
position : absolute;
z-index:10;
display:block;
opacity:1;
}

.r_check{
opacity:0;
}

.wordcloudbas{
position:absolute;
display:block;
width:1024px;
height : 768px;
top:100px;
left:0;
right:0;
margin:0 auto;
opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.r_check:checked ~ .wordcloudbas {
 opacity:0;
-webkit-transform:scale(1,0);
-moz-transform:scale(1,0);
-ms-transform:scale(1,0);
-o-transform:scale(1,0);
transform:scale(1,0);
}

.r_check:checked .vignette{
opacity:0;
}


J'avoue qu'un petit coup de pouce serait une aide précieuse !
Modifié par Bilboquette (19 Apr 2017 - 13:55)
Bonjour,

Le sélecteur
.r_check:checked .vignette

implique que .vignette est un fils de l'élément .r_check

Pour arriver à choper .vignette il faut que tu procèdes comme avec .wordcloudbas c'est à dire passer par un sélecteur d’adjacence (direct avec le + ou indirect avec le ~) puis descendre dans ce frère :
.r_check:checked + .on_check .vignette


Bonne journée
Meilleure solution