Как переключить класс с использованием чистого javascript в html

У меня есть <div>, и я хочу переключать его классы на hover.

Вот мой код:

function a(){
    this.classList.toggle('first');
    this.classList.toggle('sec');
}
document.querySelector('#container').addEventListener('click', a );

Я знаю, что в моем html или css нет проблем. Просто я должен изменить и поставить что-то вместо click, но я не знаю, что.

Пожалуйста, помогите!!

Ответ 1

Событие Hover называется "mouseenter" вместо "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>

Ответ 2

Хотя подход Tom Chung определенно работает, лучше дать mouseenter и mouseleave свой собственный обработчик:

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>