Comment basculer la classe en utilisant javascript pur en html

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>