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

Question

我有一个 div 网格。我希望每个 div 在每次鼠标悬停时逐渐将颜色从灰色变为黑色 - 具体来说，我希望在第 10 次鼠标悬停事件时框变为黑色。我已经到了一半了。就目前情况而言，我有一个实现此颜色渐变的函数，但是在单个框变为黑色后，我将鼠标悬停的所有其他框也都是黑色的。如何使每个框以相同的灰色阴影开始？我打赌我可以通过一系列很长的 if 语句来实现这一点，但我想知道是否有更简洁的解决方案。

const bigContainer = document.querySelector('.bigContainer')

window.onload = function initializeGrid() {
    for(let i = 0; i < 16; i++) {
        bigContainer.innerHTML+='<div class="row">';

        for(let j = 0; j < 16; j++) {
            bigContainer.innerHTML+='<div class="smallBox">';
        }
    }
}

let rbgPercentValue = 90;

bigContainer.addEventListener('mouseover', event => {
    let target = event.target
    let rgbColor = `rgb(${rbgPercentValue}%,${rbgPercentValue}%,${rbgPercentValue}%)`

    if (target !== bigContainer) {
      target.style['background'] = rgbColor;
      rbgPercentValue -= 10;
    }

})

.smallBox {
    border: 1px solid black;
    width: 40px;
    height: 40px;
    display: inline-block;
}
.row {
    margin-bottom: -5px; 
}
.bigContainer {
    text-align: center;
}

<div class="bigContainer"></div>

Answer 1

使用标题的演示(百分比也可见)。

const bigContainer = document.querySelector('.bigContainer')

window.onload = function initializeGrid() {
    for(let i = 0; i < 16; i++) {
        bigContainer.innerHTML+='<div class="row">';

        for(let j = 0; j < 16; j++) {
            bigContainer.innerHTML+='<div class="smallBox">';
        }
    }
}

bigContainer.addEventListener('mouseover', event => {
let target = event.target
let rbgPercentValue = parseInt(target.dataset.percent);
if (isNaN(rbgPercentValue)) rbgPercentValue = 100;
if (rbgPercentValue >= 10) {
    rbgPercentValue -= 10;
    target.dataset.percent = rbgPercentValue;
}
    let rgbColor = `rgb(${rbgPercentValue}%,${rbgPercentValue}%,${rbgPercentValue}%)`

    if (target !== bigContainer) {
        target.style['background'] = rgbColor;
    }

})

.smallBox {
    border: 1px solid black;
    width: 40px;
    height: 40px;
    display: inline-block;
}
.row {
    margin-bottom: -5px;
}
.bigContainer {
    text-align: center;
}

<div class="bigContainer"></div>