Cibler un élément frère adjacent
Bonjour,
Toujours en apprentissage de Sass (.scss) je souhaiterais en appuyant sur un bouton, remplir une barre.
J'ai le cadre de ma barre qui est voisin du bouton, et la barre qui est l'enfant du cadre. Mais voilà, je n'arrive pas du tous à activer le remplissage de la barre.
Voici le
Code:
1
2
3
4
| <div class="progress"> <!--Le cadre de la barre-->
<div class="progress__bar"></div> <!--la barre de chargement-->
</div>
<input class="btn" type="button" value="click"> |
Voici le
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| .progress { //le cadre de la barre
@extend %margin-top-bot;
position: relative;
width: $bar-box-sizeW;
height: $bar-box-sizeH;
border: black 2px solid;
background-color: white;
&__bar { //la barre de chargement
@include absolute-el(0,0,0,0,0,0);
width: $bar-sizeW;
height: $bar-sizeH;
background-color: green;
transform: scaleX(0); //la barre est vide
transform-origin: left;
transition: transform 2000ms;
}
}
.btn {
@extend %btn;
@extend %margin-top-bot;
&:active + .progress > .progress__bar { //Ici je galère à trouvé comment cibler la barre
transform: scaleX(1); //la barre est pleine
}
} |
J'ai essayé &:active + .progress__bar aussi mais ça ne fonctionne toujours pas.
Et autre chose, comment ce fait-il que lors du chargement de la page je vois la barre se vider?
Étant donné que je lui est mis transform: scaleX(0); ne devrait-elle pas apparaître vide?
Merci d'avance du coup de main.
Je me forme sur OpenClassRooms, et même si dans l'ensemble j'avance bien, certaines choses sont encore dans l'ombre, et les cours ne m'éclaircissent pas.
