将鼠标悬停在链接 Vanilla JS 上时更改 div 的背景

Question

当我通过页面上的链接进行 hover 时，我希望更改名为“grid-light”的 div 的一个 class 的背景。 我觉得我的 JS 是正确的，但我没有得到我想要的结果。 这是我的代码：

网格灯

JS

一个元素到hover over

class 将“grid-light”更改为

Answer 1

https://gyazo.com/f36d9970fa6100e2ac9af41a1d2d7a59

此链接向您展示了我认为您的目标，您声明了变量，鼠标悬停在链接 1 上时，鼠标移出链接 1 时会将 div1 项目更改为红色，它将 div1 更改回黑色

如果我能澄清更多，请告诉我！

Answer 2

看起来您正在尝试使用 jquery 之类的元素，而 className 是 React 的东西。

div1.className = "div1hovered";

而使用 javascript 您可以访问类列表：

div1.classList.add("div1hovered");

还建议使用 CSS 执行此操作：

div1:hover {
    background-color: red;
}