Javascript 悬停时滚动-反应js

目前，我有这个菜单，我想做的是，每当我们在类名为“scroll button down”（向下滚动按钮）的按钮上悬停时，我想向下滚动菜单，但现在只有按钮在滚动，而不是所有菜单

这是我目前的代码：

 return (
      <div className="menu-wrapper">
        <div>
          <a className="menu-item">Pizza</a>
          <a className="menu-item">Hamburguers</a>
          <button>{"⌃"}</button>  
          <a className="menu-item">Guacamole</a>
          <a className="menu-item">Sushi</a>
          <button className="scroll-button-down">{"⌄"}</button>
        </div>
      </div>
    );

css

  .scroll-button-down:hover {
    animation: moveMenushow 0.6s linear forwards;
  }

  @keyframes moveMenushow {
    100% {
      transform: translateY(-40%);
    }
  }

返回(
披萨
汉堡
{"⌃"}  
鳄梨酱
寿司
{"⌄"}
);
css
.向下滚动按钮：悬停{
动画：moveMenushow 0.6s线性向前；
}
@关键帧moveMenushow{
100% {
转化：translateY（-40%）；
}
}

使用JS，您可以实现这种效果。下面是一段代码，您可以用来跟踪事件。我不清楚滚动哪个元素，所以您需要自己完成这部分

让scrollToken=null；
功能鼠标指针（方向）{
scrollToken=setInterval（函数（）{
如果（方向==“向下”）{
//向下滚动，例如使用scrollBy
}否则{
//向上滚动，例如使用scrollBy
}
}, 3);
}
函数mouseLeave（）{
clearInterval（scrollToken）；
}

披萨
汉堡
{"⌃"}  
鳄梨酱
寿司
{"⌄"}

我认为没有JS您无法做到这一点。如果您想根据子级的状态应用属性，CSS不是可选择的工具（它之所以称为级联样式表是有原因的）我想你需要用JS来回答这个问题。你能用JS提供一个非常一般的例子吗？？？@chingucodingI会写下来作为这个问题的答案。