How to toggle class using pure javascript in html
Solution 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>
Solution 2:
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;
}<div id="container" class="first">
TEST
</div>(see also this Fiddle)