Problèmes : mouseover

[Xorellion]

Bonjour à tous,

Je souhaiterai "toggle" la classe 'active' dans ma div '.img-hover' lorsque je passe ma souris sur la div : '#img-to-hover'. Mon code fonctionne, mais il ne prends en compte que la première div. Avez-vous une solution ? Mis à part rajouter : 'onmouseover(this)' dans le code html.

Mon code :

HTML:

Code : Tout sélectionner

<div class="row">
    <div class="col-7 relative hidden">
        <img id="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 id="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 : Tout sélectionner

const img = document.querySelector('#img-to-hover'); 
const hover = document.querySelector('.img-hover');

img.addEventListener('mouseover', () => {
    hover.classList.toggle('active');
});

img.addEventListener('mouseout', () => {
    hover.classList.remove('active');
});

MERCI.

[webmaster]

Bonjour

C'est logique. querySelector() retourne le premier élément.
Il faut utiliser querySelectorAll() qui retourne le tableau et qu'il faut parcourir.
Voir ici :
https://www.toutjavascript.com/referenc ... torall.php

[Xorellion]

Merci, pour vos conseils, je rencontre désormais un nouveau problème, j'ai compris le fonctionnement des nodes, mais mon code ne fonctionne pas.
Je partage mes deux tests javascript qui ne fonctionne pas mais qui d'après moi revient à faire la même chose.

J'aimerais que le click sur img-to-hover active la classe 'active' sur img-hover.

HTML :

Code : Tout sélectionner

<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 :

N°1

Code : Tout sélectionner

const img = document.querySelectorAll(".img-to-hover");

for (i = 0; i<img.length; i++) {
    img[i].addEventListener('click', () => {
        img[i].nextElementSibling.classList.toggle('active');
    });
}

N°2

Code : Tout sélectionner

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

MERCI

[webmaster]

Bonjour,

C'est bien pensé. Je préfère la version nextSibling qui est plus propre.
J'ai corrigé l'appel de l'événement qui ne connait pas les variables externes ici :

Code : Tout sélectionner

<style>
.active {
  background-color: blue;
}

</style>

<div class="row">
    <div class="col-7 relative hidden">
        <img class="img-to-hover" src="/livre/toutjavascript2.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="/livre/toutjavascript.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>

<script>
const img = document.querySelectorAll(".img-to-hover");

for (i = 0; i<img.length; i++) {
    img[i].addEventListener('click', (evenement) => {
        console.log(evenement.target.nextElementSibling)
        evenement.target.nextElementSibling.classList.toggle('active');
    });
}

</script>