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

     })();