Question

我希望有人可以帮助我。

我想使用http://callmenick.com/post/animating-css-only-hamburger-menu-icons

中的一个汉堡图标转换

在.click事件中触发了图标转换的jquery。我希望它在悬停或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");
      });
    }

  })();

Answer 1

因为您正在使用jQuery，所以可以使用hover()方法使用toggleClass()事件：

function toggleHandler(toggle) {
     $( toggle ).hover(function(){
         $(this).toggleClass("is-active");
     });
}

希望这有帮助。

Answer 2

我认为你需要做这样的事情

      (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");
                });
                toggle.addEventListener( "mouseover", function(e) {
                    e.preventDefault();
                    this.classList.add("is-active");
                })
                toggle.addEventListener( "mouseout", function(e) {
                    e.preventDefault();
                    this.classList.remove("is-active");
                })         
            }

        })();

Answer 3

https://developer.mozilla.org/en-US/docs/Web/Events/mouseover

在提供的示例中，请查看第24行。

您只需将'click'替换为'mouseover'，它就会按照您想要的方式运行。

在悬停时动画仅限CSS的汉堡菜单图标不是单击

3 个答案: