鼠标悬停时显示效果，鼠标悬停时隐藏效果，怎么办？

Question

so my problem here it's that the effect activate by the mouseover stay after the mouseout... anyone can show me how transform the js to make disapear the effect when the mouse out of the menu ?

Thank you

 <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

I am assuming you'd like something like this.

Take out the border if needed (This is just an approach)

snippet below

 all_li=document.getElementsByClassName('indigo-text menu__item'); function mouseover(el){ all_li[el].addEventListener('mouseover', function(){ this.children[0].classList.remove('disable'); this.children[0].classList.add('enable'); } ,false) all_li[el].addEventListener('mouseout', function(){ this.children[0].classList.remove('enable'); 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>