我希望有人可以帮助我。

我想使用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");
     });
}


希望这可以帮助。

10-05 20:53
查看更多