Conversión de evento click to hover javascript

Intento animar sobre una barra de hamburguesas, encontré un ejemplo en línea y logré que funcione en mouseenter, pero quiero que vuelva a la barra de hamburguesas después de que el mouse haya salido de la barra de hamburguesas en mouseleave.

Aquí está el código, como puede ver, el mouseenter funciona, pero cuando muevo el mouse, quiero que vuelva a la barra de hamburguesas y no permanezca como una X.

(function() {"use strict"; var toggles = document.querySelectorAll(".c-hamburger"); for (var i = toggles.length - 1; i >= 0; i--) { var toggle = toggles[i]; toggleHandler(toggle); }; function toggleHandler(toggle) { toggle.addEventListener("mouseenter", function(e) { e.preventDefault(); (this.classList.contains("is-active") === true) ? this.classList.remove("is-active"): this.classList.add("is-active"); }); } })(); 
 .c-hamburger { display: block; position: relative; overflow: hidden; margin: 0; padding: 0; width: 66px; height: 55px; font-size: 0; text-indent: -9999px; appearance: none; box-shadow: none; border-radius: none; border: none; cursor: pointer; transition: background 0.3s; } .c-hamburger:focus { outline: none; } .c-hamburger span { display: block; position: absolute; left: 18px; right: 18px; height: 2px; background: black; } .c-hamburger span::before, .c-hamburger span::after { position: absolute; display: block; left: 0; width: 100%; height: 2px; background-color: black; content: ""; } .c-hamburger span::before { top: -10px; } .c-hamburger span::after { bottom: -10px; } .c-hamburger--htx { background-color: white; } .c-hamburger--htx span { transition: background 0s 0.3s; } .c-hamburger--htx span::before, .c-hamburger--htx span::after { transition-duration: 0.3s, 0.3s; transition-delay: 0.3s, 0s; } .c-hamburger--htx span::before { transition-property: top, transform; } .c-hamburger--htx span::after { transition-property: bottom, transform; } /* active state, ie menu open */ .c-hamburger--htx.is-active { background-color: white; } .c-hamburger--htx.is-active span { background: none; } .c-hamburger--htx.is-active span::before { top: 0; transform: rotate(45deg); } .c-hamburger--htx.is-active span::after { bottom: 0; transform: rotate(-45deg); } .c-hamburger--htx.is-active span::before, .c-hamburger--htx.is-active span::after { transition-delay: 0s, 0.3s; } 
 <button class="c-hamburger c-hamburger--htx"> <span>toggle menu</span> </button> 

Puede agregar la class en mouseenter y eliminarla en mouseleave

 (function() {"use strict"; var toggles = document.querySelectorAll(".c-hamburger"); for (var i = toggles.length - 1; i >= 0; i--) { var toggle = toggles[i]; toggleHandler(toggle); }; function toggleHandler(toggle) { toggle.addEventListener("mouseenter", function(e) { e.preventDefault(); this.classList.add('is-active'); }) toggle.addEventListener('mouseleave',function(e) { this.classList.remove('is-active'); }); } })(); 
 .c-hamburger { display: block; position: relative; overflow: hidden; margin: 0; padding: 0; width: 66px; height: 55px; font-size: 0; text-indent: -9999px; appearance: none; box-shadow: none; border-radius: none; border: none; cursor: pointer; transition: background 0.3s; } .c-hamburger:focus { outline: none; } .c-hamburger span { display: block; position: absolute; left: 18px; right: 18px; height: 2px; background: black; } .c-hamburger span::before, .c-hamburger span::after { position: absolute; display: block; left: 0; width: 100%; height: 2px; background-color: black; content: ""; } .c-hamburger span::before { top: -10px; } .c-hamburger span::after { bottom: -10px; } .c-hamburger--htx { background-color: white; } .c-hamburger--htx span { transition: background 0s 0.3s; } .c-hamburger--htx span::before, .c-hamburger--htx span::after { transition-duration: 0.3s, 0.3s; transition-delay: 0.3s, 0s; } .c-hamburger--htx span::before { transition-property: top, transform; } .c-hamburger--htx span::after { transition-property: bottom, transform; } /* active state, ie menu open */ .c-hamburger--htx.is-active { background-color: white; } .c-hamburger--htx.is-active span { background: none; } .c-hamburger--htx.is-active span::before { top: 0; transform: rotate(45deg); } .c-hamburger--htx.is-active span::after { bottom: 0; transform: rotate(-45deg); } .c-hamburger--htx.is-active span::before, .c-hamburger--htx.is-active span::after { transition-delay: 0s, 0.3s; } 
 <button class="c-hamburger c-hamburger--htx"> <span>toggle menu</span> </button>