时间戳

首页 > 解决方案 > 如何在每个鼠标悬停事件中更改单个 div 的颜色？

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

问题描述

我有一个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>

标签： javascripthtmlcss

解决方案

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

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>

推荐阅读