用JavaScript制作菜单_wsscript编写菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39450599/article/details/90343167

本文介绍了如何利用JavaScript替代CSS的hover功能，通过mouseover和mouseout事件以及闭包技术，为菜单项添加动态交互效果。文章详细讲解了如何使用addEventListener绑定每个菜单项的事件，实现鼠标悬停时的功能触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用mouseover和mouseout代替css的hover功能
通过闭包和addEventListener设置鼠标mouseover和mouseout事件：循环执行函数(function(ind){})(i)来绑定每个菜单项的事件

for (var i = 0; i < y1.length; i++) {
      y1[i].addEventListener("mouseover",
        function(){
          var obj = y[num].querySelectorAll("ul>li");
          for(let j=0;j<obj.length;++j){
            obj[j].style.visibility="visible";
          }
        },
        false
      );
      y1[i].addEventListener("mouseout",
        function(){
          var obj = y[num].querySelectorAll(" ul>li");
          for(let j=0;j<obj.length;++j){
            obj[j].style.visibility="hidden";
          }
        },
        false
      );
    //输出永远i＝y1.length；
    //因为function在mouseover事件发生后才执行函数
  }

<script>
  var y1 = document.querySelectorAll("#nav>li>a>span");
  var y = document.querySelectorAll("#nav>li");
  for (var i = 0; i <= y1.length; i++) {
    (function(num){
      y1[i].addEventListener("mouseover",
        function(){
          var obj = y[num].querySelectorAll(" ul>li");
          for(let j=0;j<obj.length;++j){
            obj[j].style.visibility="visible";
          }
        },
        false
      );
    })(i);
    (function(num){
      y1[i].addEventListener("mouseout",
        function(){
          var obj = y[num].querySelectorAll(" ul>li");
          for(let j=0;j<obj.length;++j){
            obj[j].style.visibility="hidden";
          }
        },
        false
      );
    })(i);
  }
</script>