在悬停/单击时更改汉堡菜单的颜色

Question

我只想说我在编码方面的知识非常少。我想弄清楚如何在光标悬停或单击时将汉堡包菜单从当前颜色变为白色。我希望这是有道理的！它将是黑色背景上的三条白线，因此它是可见的。

我试过添加颜色：#fff；但我认为需要一些特定的代码行来实际更改悬停/单击时的汉堡菜单。我不知道这段代码。

请让我知道我是否为我所询问的内容包含了正确的 CSS！我添加了自定义 js 以备不时之需！

 /* Header */
  .header-wrap #logo {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    font-size: 2em;
    text-align: center;
  }
  .header-wrap #logo #wsite-title {
    font-size: inherit !important;
  }
  .header-wrap .wsite-logo {
    padding: 0 50px;
  }
  .header-wrap .wsite-logo a img {
    max-height: 40px;
  }
  .header-wrap .search {
    display: none;
  }
  .header-wrap .nav-wrap {
    position: fixed;
    display: table;
    background: @shade;
    top: 0;
    left: 0;
    z-index: 15;
    height: 55px;
    -webkit-transition: all 610ms cubic-bezier(0, 0.8, 0.55, 1);
    -moz-transition: all 610ms cubic-bezier(0, 0.8, 0.55, 1);
    -ms-transition: all 610ms cubic-bezier(0, 0.8, 0.55, 1);
    -o-transition: all 610ms cubic-bezier(0, 0.8, 0.55, 1);
    transition: all 610ms cubic-bezier(0, 0.8, 0.55, 1);
  }
  .header-wrap .nav-wrap ul {
    padding: 0 4em;
  }
  .header-wrap .hamburger {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 30px;
    height: 30px;
    padding: 10px;
    cursor: pointer;
  }
    .header-wrap .hamburger span,
  .header-wrap .hamburger span:before,
  .header-wrap .hamburger span:after {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    background: @color;
    content: '';
  }
  .header-wrap .hamburger span {
    top: 10px;
    left: 4px;
    margin: 6px 0;
  }
  .header-wrap .hamburger span:before {
    top: -8px;
  }
  .header-wrap .hamburger span:after {
    bottom: -6px;
  }

jQuery(function($) {

  // Mobile sidebars
  $.fn.expandableSidebar = function(expandedClass) {
    var $me = this;

    $me.on('click', function() {
      if(!$me.hasClass(expandedClass)) {
        $me.addClass(expandedClass);
      } else {
        $me.removeClass(expandedClass);
      }
    });
  }

  var haberdasherController = {
    init: function(opts) {
      var base = this;

      // Add classes to elements
      base._attachEvents();

      setTimeout(function(){
        base._addClasses();
        base._checkCartItems();
      }, 1000);
    },

    _addClasses: function() {
      var base = this;

      // Add placeholder text to inputs
      $('.wsite-form-sublabel').each(function(){
        var sublabel = $(this).text();
        $(this).prev('.wsite-form-input').attr('placeholder', sublabel);
      });

      // Add fullwidth class to gallery thumbs if less than 6
      $('.imageGallery').each(function(){
        if ($(this).children('div').length <= 6) {
          $(this).children('div').addClass('fullwidth-mobile');
        }
      });
    },

    _stickyFooter: function() {
      var stickyFooterMargin = $('#footer-wrap').height();

      $('.wrapper').css('margin-bottom', -stickyFooterMargin);
      $('#footer-wrap, .sticky-footer-push').css('height', stickyFooterMargin);
    },

    _checkCartItems: function() {
      var base = this;

      if($('#wsite-mini-cart').find('li.wsite-product-item').length > 0) {
        $('#wsite-mini-cart').addClass('full');
        base.cartHasItems = true;
      } else {
        $('#wsite-mini-cart').removeClass('full');
        base.cartHasItems = false;
      }
    },

    _attachEvents: function() {
      var base = this;


      $('.hamburger').on('click', function(e) {
        e.preventDefault();
        $('body').toggleClass('nav-open');
      });

      // Pad header on mobile

      setTimeout(function(){
        if($(window).width() < 992) {
          $(".banner-wrap").css({"padding-top" : $(".header-wrap > .nav-wrap").height() + "px"});
        }
      }, 800);

      // Copy login and search to mobile nav
        var login = $("#member-login").clone(true),
          search = $("#wsite-header-search-form").clone(true)
        $("#navmobile .wsite-menu-default").append(login).append(search);


      // Menu text alignment
      if($('.search').is(':empty') || $('.search').css('display') == 'none') {
        $('.menu').css('text-align', 'center');
      }

      // Store category dropdown
      $('.wsite-com-sidebar').expandableSidebar('sidebar-expanded');

      // Search filters dropdown
      $('#wsite-search-sidebar').expandableSidebar('sidebar-expanded');

      // Init fancybox swipe on mobile
      if('ontouchstart' in window) {
        $('body').on('click', 'a.w-fancybox', function() {
          base._initSwipeGallery();
        });
      }

      // Init sticky footer
      if($(window).width() > 992) {
        base._stickyFooter();
      }
    },

    _initSwipeGallery: function() {
      var base = this;

      setTimeout(function(){
        var touchGallery = document.getElementsByClassName('fancybox-wrap')[0];
        var mc = new Hammer(touchGallery);
        mc.on("panleft panright", function(ev) {
          if (ev.type == "panleft") {
            $("a.fancybox-next").trigger("click");
          } else if (ev.type == "panright") {
            $("a.fancybox-prev").trigger("click");
          }
          base._initSwipeGallery();
        });
      }, 500);
    }
  }

  $(document).ready(function(){
    haberdasherController.init();
  });
});