title: Converting click to hover event javascript
body: <p>I am trying to animate on hover a burger bar, I found an example online and managed to get it working on mouseenter, but I want it to go back to the burger bar after the mouse has left the burger bar on mouseleave.</p>
  
  <p>Here is the code, as you can see mouseenter works but when I move the mouse away I want it to go back to the burger bar and not remain as an X. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {"use strict";
    var toggles = document.querySelectorAll(".c-hamburger");
    for (var i = toggles.length - 1; i &gt;= 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");
      });
    }
               
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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, i.e. 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="c-hamburger c-hamburger--htx"&gt;
    &lt;span&gt;toggle menu&lt;/span&gt;
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>