I've been experimenting with animating a burger bar on hover and came across an example online that I managed to adapt for mouseenter functionality. However, I'm struggling to make it revert back to the burger bar shape once the mouse leaves on mouseleave.
Below is the code snippet. While mouseenter is working as intended, I need help getting it to switch back to the burger bar icon when moving away from it instead of staying as an 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, 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;
}<button class="c-hamburger c-hamburger--htx">
<span>toggle menu</span>
</button>