鼠标悬停时显示效果，鼠标退出时隐藏效果，如何

show effect with mouseover and hide effect when mouseout, HOW?

本文关键字：鼠标 如何 隐藏 悬停 显示 退出      更新时间：2023-09-26

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

我假设你想要这样的东西。

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

下面的代码段 

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>

相关文章：