使用鼠标悬停显示效果并在鼠标移除时隐藏效果，如何？

Question

所以我的问题在于，鼠标停留后鼠标停留时效果会激活...任何人都可以告诉我当鼠标退出菜单时，如何变换js以消除效果？

谢谢

＆＃13;

＆＃13;

<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>

＆＃13;

  <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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我假设你喜欢这样的事情。

如果需要，取出边框（这只是一种方法）

以下片段

＆＃13;

＆＃13;

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)

}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;