J'ai un <div> , et je veux alterner ses classes sur le vol stationnaire.
Voici mon code:
function a(){ this.classList.toggle('first'); this.classList.toggle('sec'); } document.querySelector('#container').addEventListener('click', a );
Je sais qu'il n'y a pas de problème dans mon html ou css. C'est juste que je dois changer et mettre quelque chose à la place du click , mais je ne sais pas quoi.
Aidez-nous!
L'événement «Hover» s'appelle «mouseenter» au lieu de «click».
<script type="text/javascript"> function a(){ this.classList.toggle('first'); this.classList.toggle('sec'); } document.querySelector('#container').addEventListener('mouseenter', a ) document.querySelector('#container').addEventListener('mouseleave', a ) </script>
Alors que l'approche de Tom Chung fonctionne certainement, il vaut mieux donner au mouseenter et à la mouseleave son propre gestionnaire:
var container = document.querySelector('#container'); container.addEventListener('mouseenter', function(){ this.classList.remove('first'); this.classList.add('second'); }) container.addEventListener('mouseleave', function(){ this.classList.add('first'); this.classList.remove('second'); })
.first { background: green; } .second { background: orange; }
<div id="container" class="first"> TEST </div>