动画CSS只汉堡包菜单图标上悬停不点击

Question

我希望有人可以帮助我这个。

我想用汉堡包图标的一个转换从http://callmenick.com/post/animating-css-only-hamburger-menu-icons

的图标过渡的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"); 
     }); 
    } 

    })(); 

Answer 1

由于您使用jQuery你可以使用hover()事件与toggleClass()方法：

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

希望这有助于。

Answer 2

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

在所提供的例子，看看行24

你可以只是“鼠标悬停”取代“点击”，它会表现你想要的方式。

Answer 3

我认为你需要做的水木清华这样

 (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"); 
       })   
      } 

     })();