我有一个js文件来更新索引的基础上光标的位置上的项目的菜单这是代码我用：

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

索引更新应该使用css移动背景图像

#menu[data-active-index="0"] > #menu-background-pattern {
    background-position: 0% -25%;
  }

  #menu[data-active-index="1"] > #menu-background-pattern {
    background-position: 0% -50%;
  }

  #menu[data-active-index="2"] > #menu-background-pattern {
    background-position: 0% -75%;
  }

  #menu[data-active-index="3"] > #menu-background-pattern {
    background-position: 0% -100%;
  }

背景图像未移动，而背景图像应移动。此处为html

<div id="menu">
    <div id="menu-items">
      <div class="menu-item">Home</div>
      <div class="menu-item">Shop</div>
      <div class="menu-item">About</div>
      <div class="menu-item">Contact Us</div>
    </div>
    <div id="menu-background-pattern"></div>
    <div id="menu-background-image"></div>
  </div>
  <script></script>
  <link rel="stylesheet" href="main.css">