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

【问题标题】：Changing background of a div when hovered over a link Vanilla JS将鼠标悬停在链接 Vanilla JS 上时更改 div 的背景
【发布时间】：2020-08-07 02:42:57
【问题描述】：

当我将鼠标悬停在页面上的链接上时，我希望更改一类名为“grid-light”的 div 的背景。我觉得我的 JS 是正确的，但我没有得到我想要的结果。这是我的代码：

网格灯

要悬停的元素

类将“grid-light”更改为

【问题讨论】：

如果可以在这里添加代码会更容易。
div 与 HTML 中的链接有何关系？
请将代码添加为文本，而不是文本图片。视力障碍者和搜索机器人无法读取图像中的代码。

标签： javascript html css hover mouseover

【解决方案1】：

https://gyazo.com/f36d9970fa6100e2ac9af41a1d2d7a59

这个链接告诉你我认为你想要什么，你声明你的变量，将鼠标悬停在您的链接 1 上，它会将 div1 项目更改为红色鼠标移出你的link1，它会将div1变回黑色

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

【讨论】：

【解决方案2】：

看起来你正在尝试使用像 jquery 这样的元素，而 className 是一个 React 的东西。

div1.className = "div1hovered";

您可以使用 javascript 访问 classList：

div1.classList.add("div1hovered");

也建议使用 CSS 来实现：

div1:hover {
    background-color: red;
}

【讨论】：