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');
    });
}