Problèmes : mouseover

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Xorellion
Messages : 2
Enregistré le : 19 nov. 2020, 11:36

Problèmes : mouseover

Message par Xorellion » 19 nov. 2020, 11:40

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.

Avatar du membre
webmaster
Administrateur du site
Messages : 401
Enregistré le : 28 févr. 2017, 15:19

Re: Problèmes : mouseover

Message par webmaster » 19 nov. 2020, 12:56

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
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Xorellion
Messages : 2
Enregistré le : 19 nov. 2020, 11:36

Re: Problèmes : mouseover

Message par Xorellion » 19 nov. 2020, 21:36

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

Avatar du membre
webmaster
Administrateur du site
Messages : 401
Enregistré le : 28 févr. 2017, 15:19

Re: Problèmes : mouseover

Message par webmaster » 20 nov. 2020, 11:04

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>
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre