How to toggle class using pure javascript in html

Question

I have a <div>, and I want to toggle its classes on hover.

Here is my code:

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

I know there is no problem in my html or css. It is just that I have to change and put something in place of click, but I don't know what.

Please help!!

Answer 1

Hover event is called "mouseenter" instead of "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>