鼠标悬停时显示效果，鼠标悬停时隐藏效果，如何？答案

【问题标题】：show effect with mouseover and hide effect when mouseout, HOW?鼠标悬停时显示效果，鼠标悬停时隐藏效果，如何？
【发布时间】：2016-04-26 23:28:43
【问题描述】：

所以我的问题是鼠标悬停激活的效果在鼠标移出后保持不变......任何人都可以告诉我如何转换 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>

【问题讨论】：

您是否尝试在鼠标悬停时显示整个列表并在鼠标不在列表时隐藏整个列表？...准确描述您想要发生的事情...：D
@repzero 我希望效果在我悬停链接时处于活动状态，而当鼠标不在菜单链接时处于非活动状态，现在如果我悬停例如链接“插图”并且如果我把鼠标放在外面任何链接的效果都停留在“插图”上，即使我把鼠标移开...

标签： javascript mouseover mouseout

【解决方案1】：

我假设你会喜欢这样的东西。

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

sn-p 下面

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>

【讨论】：