Javascript 如何在每次鼠标悬停事件中更改单个div的颜色？

我有一排div。我希望每个div在每次鼠标移动时都能逐渐从灰色变为黑色，特别是在第10次鼠标移动事件之前，我希望盒子变为黑色。我已经走到一半了。目前，我有一个函数实现这个颜色渐变，但是当一个框变黑后，我鼠标悬停的所有其他框也变黑了。我怎样才能使每个盒子都以相同的灰色开始？我打赌我可以通过一系列非常长的

if

语句来实现这一点，但我想知道是否有更简洁的解决方案

const bigContainer=document.querySelector（“.bigContainer”）
window.onload=函数initializeGrid（）{
for（设i=0；i<16；i++）{
bigContainer.innerHTML+=''；
对于（设j=0；j<16；j++）{
bigContainer.innerHTML+=''；
}
}
}
设rbgPercentValue=90；
bigContainer.addEventListener（'mouseover'，event=>{
让target=event.target
设rgbColor=`rgb（${rbgPercentValue}%，${rbgPercentValue}%，${rbgPercentValue}%）`
if（目标！==bigContainer）{
target.style['background']=rgbColor；
rbgPercentValue-=10；
}
})

.smallBox{
边框：1px纯黑；
宽度：40px；
高度：40px；
显示：内联块；
}
.行{
边缘底部：-5px；
}
.bigContainer{
文本对齐：居中；
}

使用标题的演示（百分比也可见）

const bigContainer=document.querySelector（“.bigContainer”）
window.onload=函数initializeGrid（）{
for（设i=0；i<16；i++）{
bigContainer.innerHTML+=''；
对于（设j=0；j<16；j++）{
bigContainer.innerHTML+=''；
}
}
}
bigContainer.addEventListener（'mouseover'，event=>{
让target=event.target
让rbgPercentValue=parseInt（target.dataset.percent）；
如果（isNaN（rbgPercentValue））rbgPercentValue=100；
如果（rbgPercentValue>=10）{
rbgPercentValue-=10；
target.dataset.percent=rbgPercentValue；
}
设rgbColor=`rgb（${rbgPercentValue}%，${rbgPercentValue}%，${rbgPercentValue}%）`
if（目标！==bigContainer）{
target.style['background']=rgbColor；
}
})

.smallBox{
边框：1px纯黑；
宽度：40px；
高度：40px；
显示：内联块；
}
.行{
边缘底部：-5px；
}
.bigContainer{
文本对齐：居中；
}

使用标题的演示（百分比也可见）

const bigContainer=document.querySelector（“.bigContainer”）
window.onload=函数initializeGrid（）{
for（设i=0；i<16；i++）{
bigContainer.innerHTML+=''；
对于（设j=0；j<16；j++）{
bigContainer.innerHTML+=''；
}
}
}
bigContainer.addEventListener（'mouseover'，event=>{
让target=event.target
让rbgPercentValue=parseInt（target.dataset.percent）；
如果（isNaN（rbgPercentValue））rbgPercentValue=100；
如果（rbgPercentValue>=10）{
rbgPercentValue-=10；
target.dataset.percent=rbgPercentValue；
}
设rgbColor=`rgb（${rbgPercentValue}%，${rbgPercentValue}%，${rbgPercentValue}%）`
if（目标！==bigContainer）{
target.style['background']=rgbColor；
}
})

.smallBox{
边框：1px纯黑；
宽度：40px；
高度：40px；
显示：内联块；
}
.行{
边缘底部：-5px；
}
.bigContainer{
文本对齐：居中；
}

这应该可以做到：

const bigContainer=document.querySelector（“.bigContainer”）
window.onload=函数initializeGrid（）{
for（设i=0；i<16；i++）{
bigContainer.innerHTML+=''；
对于（设j=0；j<16；j++）{
bigContainer.innerHTML+=''；
}
}
}
bigContainer.addEventListener（'mouseover'，event=>{
const target=event.target
const rgbPercentValue=target.dataset.rgbPercentValue；
常量rgbColor=`rgb（${rgbPercentValue}%，${rgbPercentValue}%，${rgbPercentValue}%）`
if（目标！==bigContainer）{
target.dataset.rgbPercentValue=parseInt（target.dataset.rgbPercentValue）-10；
target.style['background']=rgbColor；
}
})

请参见此处的实时演示：

正如其他人所建议的，这会为每个单独的块存储颜色百分比，而不是存储在单个全局值中。

这应该可以做到：

const bigContainer=document.querySelector（“.bigContainer”）
window.onload=函数initializeGrid（）{
for（设i=0；i<16；i++）{
bigContainer.innerHTML+=''；
对于（设j=0；j<16；j++）{
bigContainer.innerHTML+=''；
}
}
}
bigContainer.addEventListener（'mouseover'，event=>{
const target=event.target
const rgbPercentValue=target.dataset.rgbPercentValue；
常量rgbColor=`rgb（${rgbPercentValue}%，${rgbPercentValue}%，${rgbPercentValue}%）`
if（目标！==bigContainer）{
target.dataset.rgbPercentValue=parseInt（target.dataset.rgbPercentValue）-10；
target.style['background']=rgbColor；
}
})

请参见此处的实时演示：

---

正如其他人所建议的，这会为每个单独的块存储颜色百分比，而不是存储在单个全局值中。

有点混乱，但这看起来应该适合您

const bigContainer=document.querySelector（“.bigContainer”）
var rbgPercentValue=100；
var RBG乘数=0.9；
var rbgbcolor=`rgb（${100}%，${100}%，${100}%）`；
var pcts=新阵列（16）；
for（设i=0；i{
让target=event.target
var id=event.target.id；
var指数=id.indexOf（“C”）；
var行=id.substring（1，索引）；
var col=id.substring（索引+1）；
var div=document.getElementById（id）；
如果（行！=''）{
pcts[row][col]=pcts[row][col]*rbg乘法器；
rbgcolor=`rgb（${pcts[row][col]}%，${pcts[row][col]}%，${pcts[row][col]}%）`；
div.style['background']=rbgcolor；
}
})

.smallBox