Problèmes : mouseover
Posté : 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:
JAVASCRIPT :
MERCI.
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>
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.