title: How Can I add active class using mouse hover in menu item with jquery?
body: <p>I used This code but Its only work on click event but I want to set it in hover and click both, hover option just will be for hover and when hover out it will remove that active class.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
      [].slice.call(document.querySelectorAll('.menu')).forEach(function(menu) {
       var menuItems = menu.querySelectorAll('.menu_link'),
        setCurrent = function(ev) {
         ev.preventDefault();
  
         var item = ev.target.parentNode; // li
         
         // return if already current
         if( classie.has(item, 'menu_item-current') ) {
          return false;
         }
         // remove current
         classie.remove(menu.querySelector('.menu_item-current'), 'menu_item-current');
         // set current
         classie.add(item, 'menu_item-current');
        };
       
       [].slice.call(menuItems).forEach(function(el) {
        el.addEventListener('click', setCurrent);
       });
      });
  
      [].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link) {
       link.setAttribute('data-clipboard-text', location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id);
       new Clipboard(link);
       link.addEventListener('hover', function() {
        classie.add(link, 'link-copy--animate');
        setTimeout(function() {
         classie.remove(link, 'link-copy--animate');
        }, 300);
       });
      });
     })(window);
        
  
  
  ( function( window ) {
  
  'use strict';
  
  
  function classReg( className ) {
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
  }
  
  var hasClass, addClass, removeClass;
  
  if ( 'classList' in document.documentElement ) {
    hasClass = function( elem, c ) {
      return elem.classList.contains( c );
    };
    addClass = function( elem, c ) {
      elem.classList.add( c );
    };
    removeClass = function( elem, c ) {
      elem.classList.remove( c );
    };
  }
  else {
    hasClass = function( elem, c ) {
      return classReg( c ).test( elem.className );
    };
    addClass = function( elem, c ) {
      if ( !hasClass( elem, c ) ) {
        elem.className = elem.className + ' ' + c;
      }
    };
    removeClass = function( elem, c ) {
      elem.className = elem.className.replace( classReg( c ), ' ' );
    };
  }
  
  function toggleClass( elem, c ) {
    var fn = hasClass( elem, c ) ? removeClass : addClass;
    fn( elem, c );
  }
  
  var classie = {
    // full names
    hasClass: hasClass,
    addClass: addClass,
    removeClass: removeClass,
    toggleClass: toggleClass,
    // short names
    has: hasClass,
    add: addClass,
    remove: removeClass,
    toggle: toggleClass
  };
  
  // transport
  if ( typeof define === 'function' &amp;&amp; define.amd ) {
    // AMD
    define( classie );
  } else {
    // browser global
    window.classie = classie;
  }
  
  })( window );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.menu_item {
    display: block;
    margin: 1em 0;
  }
  .menu_link {
    -moz-user-select: none;
    cursor: pointer;
    display: block;
    font-size: 1.05em;
    font-weight: bold;
    padding: 10px 20px;
    text-decoration: none !important;
  }
  .menu_list {
    display: flex;
    flex-wrap: wrap;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  .menu {
    line-height: 1;
    margin: 0 ;
  }
  .menu-miranda .menu_item {
    margin: 10px 5px;
    position: relative;
  }
  .menu-miranda .menu_link {
    color: #b5b5b5;
    display: block;
    min-width: auto;
    position: relative;
    text-align: center;
    transition: color 0.3s ease 0s;
  }
  .menu-miranda .menu_link:hover, .menu-miranda .menu_link:focus {
      color: #929292;
  }
  .menu-miranda .menu_item-current .menu_link {
      color: #d94f5c;
  }
  .menu-miranda .menu_item::before, .menu-miranda .menu_item::after, .menu-miranda .menu_link::before, .menu-miranda .menu_link::after {
      background: #d94f5c none repeat scroll 0 0;
      content: "";
      position: absolute;
      transition: transform 0.1s cubic-bezier(1, 0.68, 0.16, 0.9) 0s;
  }
  .menu-miranda .menu_item::before, .menu-miranda .menu_item::after {
      height: 100%;
      top: 0;
      transform: scale3d(1, 0, 1);
      width: 2px;
  }
  .menu-miranda .menu_item::before {
      left: 0;
      transform-origin: 50% 100% 0;
  }
  .menu-miranda .menu_item::after {
      right: 0;
      transform-origin: 50% 0 0;
  }
  .menu-miranda .menu_link::before, .menu-miranda .menu_link::after {
      height: 2px;
      left: 0;
      transform: scale3d(0, 1, 1);
      width: 100%;
  }
  .menu-miranda .menu_link::before {
      top: 0;
      transform-origin: 0 50% 0;
  }
  .menu-miranda .menu_link::after {
      bottom: 0;
      transform-origin: 100% 50% 0;
  }
  .menu-miranda .menu_item .menu_link::after {
      transition-delay: 0.3s;
  }
  .menu-miranda .menu_item-current .menu_link::after {
      transition-delay: 0s;
  }
  .menu-miranda .menu_item::before {
      transition-delay: 0.2s;
  }
  .menu-miranda .menu_item-current::before {
      transition-delay: 0.1s;
  }
  .menu-miranda .menu_item .menu_link::before {
      transition-delay: 0.1s;
  }
  .menu-miranda .menu_item-current .menu_link::before {
      transition-delay: 0.2s;
  }
  .menu-miranda .menu_item-current::after {
      transition-delay: 0.3s;
  }
  .menu-miranda .menu_item-current::before, .menu-miranda .menu_item-current::after, .menu-miranda .menu_item-current .menu_link::before, .menu-miranda .menu_item-current .menu_link::after {
      transform: scale3d(1, 1, 1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav-collapse collapse pull-right menu menu-miranda"&gt;
                          &lt;ul class="menu_list" id="top-navigation"&gt;
                              &lt;li class="menu_item menu_item-current"&gt;&lt;a class="menu_link"  href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="menu_item"&gt;&lt;a class="menu_link" href="#service"&gt;Services&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="menu_item"&gt;&lt;a class="menu_link"  href="#portfolio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="menu_item"&gt;&lt;a class="menu_link"  href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="menu_item"&gt;&lt;a class="menu_link"  href="#clients"&gt;Clients&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="menu_item"&gt;&lt;a class="menu_link"  href="#price"&gt;Price&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="menu_item"&gt;&lt;a class="menu_link"  href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my code its work on click event but I want to set it in mouse hover, how can I do that ? </p>