网站菜单悬停背景动画JavaScript未生效，求问题定位

云上老周

2026-7-23

问题排查与修复方案

核心问题1：JavaScript执行时机错误

你的JS代码在DOM元素未完全加载时就执行了，导致document.getElementById("menu")和getElementsByClassName("menu-item")无法获取到目标元素，事件绑定直接失效。

修复方式：
把JS代码移到HTML的</body>标签之前，或者用DOM加载完成事件包裹代码：

document.addEventListener('DOMContentLoaded', () => {
  const menu = document.getElementById("menu");

  Array.from(document.getElementsByClassName("menu-item"))
    .forEach((item, index) => {
      item.onmouseover = () => {
        menu.dataset.activeIndex = index;
      }
    });
});

核心问题2：CSS缺少背景位置过渡动画

你给#menu-background-pattern仅设置了opacity和background-size的过渡效果，但background-position的变化没有添加过渡，导致切换时没有平滑动画。

修复方式：
修改CSS中#menu-background-pattern的transition属性，补充background-position：

#menu-background-pattern {
  height: 100vh;
  width: 100vw;
  background-image: radial-gradient( rgba(255, 255, 255, 0.1) 9%, transparent 9%);
  background-position: 0% 0%;
  background-size: 12vmin 12vmin;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  /* 补充background-position的过渡 */
  transition: opacity 800ms ease, background-size 800ms ease, background-position 800ms ease;
}