原生JS导航悬停交互：横向切换相邻项时旧元素after类未自动移除

• 事件监听器冗余导致逻辑失效
  每次触发li的mouseover事件时，都会执行navMouseOver(element)，该函数会给.banner元素重复绑定多个独立的mouseover监听器，每个监听器通过闭包引用上一次触发悬停的li元素。当鼠标从一个li横向移动到相邻li时，事件目标是新的li，判断条件!e.target.classList.contains("link")为false，所有历史监听器里的类移除逻辑都不会执行，旧li的after类自然残留。
• 激活状态切换逻辑缺失
  当前代码没有设计“切换导航项时批量清空旧激活状态”的分支，仅在鼠标移动到banner非导航区域时移除单个元素的类，完全覆盖不到横向切换导航的场景。
• 附带的代码解析bug
  CSS中写的top: - 20px属性值中间多了空格，浏览器会直接忽略该样式声明。

核心思路 #

1. 去掉重复绑定的冗余事件监听器，所有事件只在初始化阶段绑定一次
2. 利用事件冒泡统一处理导航项悬停逻辑：每次悬停新导航项时，先批量清空所有导航项的after类，再给当前悬停项添加激活类
3. 用mouseleave事件替代原来的mouseover判断，实现鼠标完全移出banner区域时的状态重置
4. 修正HTML结构不规范、CSS属性值格式错误的问题

修正后的可运行代码 #

// 初始化调用
navigationMouseOver();

function navScroll() {
  window.addEventListener("scroll", function() {
    if (document.documentElement.scrollTop > 100) {
      document.querySelector(".contact-info2").classList.add("visible");
    } else {
      document.querySelector(".contact-info2").classList.remove("visible");
    }
  })
}

function navigationMouseOver() {
  const navUl = document.querySelector(".nav-ul");
  const subMenu = document.querySelector(".sub-menu");
  const arrow = document.querySelector(".arrow");
  const banner = document.querySelector(".banner");

  // 统一给导航容器绑mouseover事件，代替之前给每个li单独绑+重复给banner绑事件的逻辑
  navUl.addEventListener("mouseover", function(e) {
    const currentLink = e.target.closest(".link");
    if (!currentLink) return; // 目标不是导航项时直接跳过

    // 核心逻辑：先清空所有导航项的激活类
    document.querySelectorAll(".link").forEach(link => {
      link.classList.remove("after");
      subMenu.classList.remove("show");
    });

    // 给当前悬停项加激活类
    currentLink.classList.add("after");
    subMenu.classList.add("show");

    // 计算提示块位置
    const elementPos = currentLink.getBoundingClientRect();
    const elementWidth = elementPos.width;
    const elementBottom = elementPos.bottom - 10;
    const elementCenter = (elementPos.left + elementPos.right) / 2;
    const trueCenter = elementCenter - elementWidth;
    const arrowW = arrow.clientWidth;
    const arrowCenter = elementCenter - arrowW;

    arrow.style.bottom = `${elementBottom}px`
    arrow.style.left = `${arrowCenter}px`
    subMenu.style.top = `${elementBottom}px`;
    subMenu.style.left = `${trueCenter}px`;
    subMenu.innerHTML = "Hallo";
  })

  // 给banner绑一次mouseleave事件，代替之前重复绑定的判断逻辑
  banner.addEventListener("mouseleave", function() {
    // 鼠标完全移出banner时，清空所有激活状态
    document.querySelectorAll(".link").forEach(link => {
      link.classList.remove("after");
    })
    subMenu.classList.remove("show");
  })
}

.banner-nav li.after::after {
  content: "";
  display: block;
  position: absolute;
  background: white;
  height: 30px;
  width: 30px;
  top: -20px; /* 修正原来的空格格式错误 */
  left: 40%;
}

<section class="banner">
  <div class="banner-logo">
    <h1 class="logo-text"> Logo</h1>
  </div>
  <div class="banner-nav ">
    <ul class="nav-ul ">
      <!-- 修正HTML结构：把a标签放在li内部，符合DOM规范 -->
      <li class="link"><a href="#"> Gallery </a></li>
      <li class="link"><a href="#"> Products</a></li>
      <li class="link"><a href="#"> About </a></li>
      <li class="link"><a href="#"> Contact </a></li>
    </ul>
  </div>
  <div class="arrow"></div>
  <div class="sub-menu"></div>
</section>

• 鼠标在相邻导航项横向移动时，会自动清空前一个导航项的after类，仅保留当前悬停项的激活状态，指示块不会残留
• 鼠标垂直向下完全移出导航区域时，mouseleave事件会触发，清空所有激活状态，和原预期一致
• 去掉了所有重复绑定的冗余事件监听器，不会随着鼠标悬停次数增加产生内存泄漏

内容的提问来源于stack exchange，提问作者Rabbithole