показать эффект с помощью мыши и скрыть эффект при мышином, КАК?

Question

так что моя проблема здесь в том, что эффект активируется при наведении курсора мыши после мыши. Кто-нибудь может показать мне, как преобразовать js, чтобы избавиться от эффекта, когда мышь вышла из меню?

Спасибо

<script> 
 
    (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('mouseover', 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('mouseover', function() { 
 
     classie.add(link, 'link-copy--animate'); 
 
     setTimeout(function() { 
 
      classie.remove(link, 'link-copy--animate'); 
 
     }, 300); 
 
     }); 
 
    }); 
 
    })(window); 
 
    </script>

<section class="section section--menu" id="maria"> 
 
     <nav class="menu menu--maria"> 
 
      <ul class="right hide-on-med-and-down menu__list"> 
 
      <li class="indigo-text menu__item menu__item--current"><a href="#" class="menu__link">Illustration</a> 
 
      </li> 
 
      <li class="indigo-text menu__item"><a href="#" class="menu__link">Edition</a></li> 
 
      <li class="indigo-text menu__item"><a href="#" class="menu__link">Graphisme</a></li> 
 
      <li class="indigo-text menu__item"><a href="#" class="menu__link">Contact</a></li> 
 
      </ul> 
 
     </nav> 
 
     </section>

Answer 1

Я предполагаю, что вы хотите что-то вроде этого.

Выньте границу, если это необходимо (это только подход)

фрагмент кода ниже

all_li=document.getElementsByClassName('indigo-text menu__item'); 
 
function mouseover(el){ 
 
all_li[el].addEventListener('mouseover', function(){ 
 
\t this.children[0].classList.remove('disable'); 
 
\t this.children[0].classList.add('enable'); 
 

 
} 
 
,false) 
 
all_li[el].addEventListener('mouseout', function(){ 
 
\t this.children[0].classList.remove('enable'); 
 
\t this.children[0].classList.add('disable'); 
 

 
} 
 
,false) 
 
} //end of function 
 
for(i=0;i<all_li.length;++i){ 
 
mouseover(i) 
 

 
}

a { 
 
pointer-events:none; 
 
text-decoration:none; 
 
color:grey; 
 
} 
 
.disable { 
 
pointer-events:none; 
 
text-decoration:none; 
 
color:grey; 
 
} 
 
.enable { 
 
pointer-events:auto; 
 
text-decoration: underline; 
 
color:black; 
 
} 
 
ul{ 
 
    border:solid; 
 
    display:inline-block; 
 
}

<section class="section section--menu" id="maria"> 
 
     <nav class="menu menu--maria"> 
 
      <ul class="right hide-on-med-and-down menu__list"> 
 
      <li class="indigo-text menu__item menu__item--current"><a href="#" class="menu__link">Illustration</a> 
 
      </li> 
 
      <li class="indigo-text menu__item"><a href="#" class="menu__link">Edition</a></li> 
 
      <li class="indigo-text menu__item"><a href="#" class="menu__link">Graphisme</a></li> 
 
      <li class="indigo-text menu__item"><a href="#" class="menu__link">Contact</a></li> 
 
      </ul> 
 
     </nav> 
 
     </section>