How To Animate CSS Animated Hamburger Icon On MouseOver

Question

I've got an animated CSS Hamburger icon at http://elijahmanor.com/css-animated-hamburger-icon/ and I wanna need to use it but I want to use it via hover to view set ex(x) and when not hover set it to default style that 3 lines. But I cannot do that even I used hover function.

 document.querySelector("#nav-toggle") .addEventListener("click", function() { this.classList.toggle("active"); }); 

 #nav-toggle { position: absolute; left: 50%; top: 50%; } #nav-toggle { cursor: pointer; padding: 10px 35px 16px 0px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; height: 5px; width: 35px; background: black; position: absolute; display: block; content: ''; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; } #nav-toggle.active span { background-color: transparent; } #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); } 

 <a id="nav-toggle" href="#"><span></span></a> 

Answer 1

You can do it using mouseover function.

 document.querySelector("#nav-toggle") .addEventListener("mouseover", function() { this.classList.toggle("active"); }); 

 #nav-toggle { position: absolute; left: 50%; top: 50%; } #nav-toggle { cursor: pointer; padding: 10px 35px 16px 0px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; height: 5px; width: 35px; background: black; position: absolute; display: block; content: ''; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; } #nav-toggle.active span { background-color: transparent; } #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); } 

 <a id="nav-toggle" href="#"><span></span></a> 

Answer 2

The hover event is called mouseover .

The events name are the classic HTML DOM Events , just without the on prefix. For example, use mouseover instead of onmouseover .

 document.querySelector( "#nav-toggle" ) .addEventListener( "mouseover", function() { this.classList.toggle( "active" ); }); 

 #nav-toggle { position: absolute; left: 50%; top: 50%; } #nav-toggle { cursor: pointer; padding: 10px 35px 16px 0px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; height: 5px; width: 35px; background: black; position: absolute; display: block; content: ''; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; } #nav-toggle.active span { background-color: transparent; } #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); } 

 <a id="nav-toggle" href="#"><span></span></a> 

Answer 3

You just need to use mouseover instead of hover at your script.

document.querySelector("#nav-toggle")
  .addEventListener("mouseover", function() {
    this.classList.toggle("active");
  });

Answer 4

You need to use mouseover event.

 document.querySelector( "#nav-toggle" ) .addEventListener( "mouseover", function() { this.classList.toggle( "active" ); }); 

 #nav-toggle { position: absolute; left: 50%; top: 50%; } #nav-toggle { cursor: pointer; padding: 10px 35px 16px 0px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; height: 5px; width: 35px; background: black; position: absolute; display: block; content: ''; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; } #nav-toggle.active span { background-color: transparent; } #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); } 

 <a id="nav-toggle" href="#"><span></span></a>