How to toggle class using pure javascript in html
100,750
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)
Author by
user2906766
Updated on July 08, 2022Comments
-
user2906766 almost 2 years
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!!