Javascript 将鼠标悬停在div上更改背景色

我正在构建一个类似于蚀刻草图的交互式网格。我已经设置了网格，现在正在尝试设置“悬停”效果，以便当鼠标经过网格div时，网格div会改变颜色，并像笔一样在网格中留下（像素化的）轨迹。但是我想根据点击的按钮改变颜色；ie黑色按钮在你悬停时留下黑色轨迹，彩虹留下彩虹轨迹，重置清除网格

克劳迪亚斯蚀刻素描
克劳迪娅画素描！
彩虹
黑色
重置

const container=document.getElementById（“容器”）；
const btnReset=document.getElementById（“重置”）；
const btnBlack=document.getElementById（“黑色”）；
const btnRainbow=document.getElementById（“彩虹”）；
函数生成行（行、列）{
container.style.setProperty（'--grid rows'，rows）；
container.style.setProperty（'--grid cols'，cols）；
对于（c=0；c<（行*列）；c++）{
让cell=document.createElement（“div”）；
container.appendChild（cell.className=“网格项”；
};
};
makeRows（16,16）；

：根目录{
--网格cols:1；
--网格行：1；
}
#容器{
显示：网格；
网格模板行：重复（变量（--网格行），1fr）；
网格模板列：重复（var（--grid cols），1fr）；
}
.表格项目{
高度：30px；
宽度：30px；
边框：1px实心#ddd；
文本对齐：居中；
}  
布莱克先生{
背景色：黑色；
}
h1{
颜色：白色；
}

因为你想要一条轨迹，你需要永久地改变颜色，而不仅仅是悬停，所以你需要使用javascript

使用以下各项创建网格时，向每个网格项添加事件侦听器：

cell.addEventListener('mouseover', 
  e => e.target.classList.add('my-colour-class')
)

然后确保你的“我的颜色”课程有合适的风格

.my-color-class {
  background-colour: blue;
}

注意，要更改应用的类别（根据选择的笔更改轨迹颜色），请将当前颜色存储在状态变量中，并使用地图，例如

let currentColor = 'black'

const colors = { black: 'black' }

e => e.target.classList.add(colors[currentColor])

---

因为你想要一条轨迹，你需要永久地改变颜色，而不仅仅是悬停，所以你需要使用javascript

使用以下各项创建网格时，向每个网格项添加事件侦听器：

cell.addEventListener('mouseover', 
  e => e.target.classList.add('my-colour-class')
)

然后确保你的“我的颜色”课程有合适的风格

.my-color-class {
  background-colour: blue;
}

注意，要更改应用的类别（根据选择的笔更改轨迹颜色），请将当前颜色存储在状态变量中，并使用地图，例如

let currentColor = 'black'

const colors = { black: 'black' }

e => e.target.classList.add(colors[currentColor])

我们可以添加：使用css技巧悬停动画

---

---

我们可以添加：hover anivation with css trick

您已经在HTML中包含了jQuery，您是否打算使用它？div的背景只能使用CSS在悬停状态下更改。它必须使用JavaScript事件鼠标，或者如上面的评论所述？我不打算使用jQuery，我决定用HTML删除它时忘记了。jquery标记已移除您已经在HTML中包含jquery，是否计划使用它？div的背景只能使用CSS在悬停状态下更改。它必须使用JavaScript事件鼠标，或者如上面的评论所述？我不打算使用jQuery，我决定用HTML删除它时忘记了。它的deleted now.jquery标记removedGreat，但是您可以使用事件委派并将其添加到网格本身，而不是向每个网格项添加事件侦听器。是的，这是管理侦听器清理、避免内存泄漏、简单性和性能（如果它变得如此复杂）的更好的体系结构。是从您的链接更简洁的链接-谢谢！这就是我现在所拥有的，我肯定错过了一些东西，因为它不起作用，并且它被放在我的make rows（16,16）下面；从上面发布的代码

函数blackbutt（e）{document.getElementsByClassName（'black'）.addEventListener（'click'，函数（e）{cell.addEventListener（'mouseover'，e=>e.target.classlist.add（'black'）；}）难以读取，但GetElementsByCassName返回一个节点列表-因此您不能直接在该节点列表上调用addEventListener-您需要首先将其转换为一个数组并在其上循环。很好，但您可以使用事件委派并将其添加到网格本身，而不是向每个网格项添加事件侦听器。是的，这是管理侦听器清理、避免内存泄漏、简单性和性能（如果它变得如此复杂）的更好的体系结构。是从您的链接更简洁的链接-谢谢！这就是我现在所拥有的，我肯定错过了一些东西，因为它不起作用，并且它被放在我的make rows（16,16）下面；从上面发布的代码
函数blackbutt（e）{document.getElementsByClassName（'black'）.addEventListener（'click'，函数（e）{cell.addEventListener（'mouseover'，e=>e.target.classlist.add（'black'）；}）难以阅读，但getElementsByClassName返回一个节点列表-因此您不能直接调用addEventListener-您需要先将其转换为数组并在其上循环。这并不能回答问题，因为鼠标不再悬停后悬停效果不会持续。这不能回答问题，因为鼠标不再悬停后，悬停效果不会持续。