How to toggle class using pure javascript in html

Question

I have a

, and I want to toggle its classes on hover.

Here is my code:

function a(){
    this.classList.toggle(\'first\');
           


        

Answer 1

While Tom Chung's approach definitely works, it's better to give mouseenter and mouseleave their own handler :

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

    TEST

(see also this Fiddle)