我希望有人可以帮助我。
我想使用http://callmenick.com/post/animating-css-only-hamburger-menu-icons中的“汉堡包”图标转换之一
Icon过渡的jQuery在.click
事件上触发。我希望它在悬停或mouseover
上触发并退出,以便动画在悬停时播放并在鼠标移出时反转。
这是需要更改的脚本。
// Animated Hamburger Icon
(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( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}
})();
最佳答案
因为您使用的是jQuery,所以可以将hover()
事件与toggleClass()
方法一起使用:
function toggleHandler(toggle) {
$( toggle ).hover(function(){
$(this).toggleClass("is-active");
});
}
希望这可以帮助。