Bonsoir,
Je rencontre un problème, j'aimerais qu'un click sur la div img-to-hover active la classe 'active' sur la div img-hover.
Je partage mes deux tests javascript qui ne fonctionne pas mais qui d'après moi revient à faire la même chose.
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 <div class="row"> <div class="col-7 relative hidden"> <img class="img-to-hover" src="img/oil_station.jpg" alt=""> <div class="img-hover"> <div class="img-hover-box"> <div class="img-hover-content"> <span class="img-hover-title">Ceci est un message à caractère informatif.</span><br><br> <span class="img-hover-description">Ceci est un message à caractère informatif.</span> </div> </div> </div> </div> <div class="col-3 relative hidden"> <img class="img-to-hover" src="img/oil_station2.jpg" alt=""> <div class="img-hover"> <div class="img-hover-box"> <div class="img-hover-content"> <span class="img-hover-title">Ceci est un message à caractère informatif.</span><br><br> <span class="img-hover-description">Ceci est un message à caractère informatif.</span> </div> </div> </div> </div> </div>
JAVASCRIPT
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 const img = document.querySelectorAll(".img-to-hover"); const hover = document.querySelectorAll('.img-hover'); for (i = 0; i<img.length; i++) { img[i].addEventListener('click', () => { hover[i].classList.toggle('active'); }); }
Partager