如何用CSS实现网格背景颜色的淡出效果？

你的问题出在过渡属性的位置不对，以及没有处理重复悬停的定时器冲突。下面是修复方案：

问题分析 #

• 你把transition只写在了.hover类中，当移除这个类时，网格项的基础样式没有过渡配置，所以背景色会瞬间跳转，不会平滑淡出。
• 快速多次悬停会创建多个setTimeout，导致类被提前移除，效果不符合预期。

修复后的代码 #

HTML

<div class="gridContainer"> </div>

CSS

.gridContainer {
  background-color: rgb(234, 241, 241);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gridContainer>div {
  height: 25px;
  flex: 0 1 5.8%;
  border: 1px solid green;
  text-align: center;
  /* 把过渡属性放到基础样式，确保添加/移除类都能触发过渡 */
  transition: background-color 2s ease;
}

.hover {
  background-color: aquamarine;
}

JavaScript

// 16x16=256，循环条件改成i<=256更直观
for (let i = 1; i <= 256; i++) {
  const div = document.createElement("div")
  div.textContent = i;
  // 给每个div单独存定时器ID，避免冲突
  let fadeTimer;
  div.addEventListener("mouseover", (e) => {
    // 先清除之前的定时器，防止重复触发
    clearTimeout(fadeTimer);
    div.classList.add("hover");
    // 2秒后移除类，此时因为基础样式有过渡，会平滑淡出
    fadeTimer = setTimeout(() => {
      div.classList.remove("hover")
    }, 2000)
  })
  document.querySelector(".gridContainer").append(div);
}

关键修改说明 #

1. CSS过渡属性迁移：将transition从.hover类移到网格项的基础样式中，这样无论添加还是移除.hover类，背景色的变化都会应用过渡效果，实现平滑的淡入淡出。
2. 定时器冲突处理：给每个网格项添加独立的定时器变量，每次悬停时先清除之前的定时器，避免多次悬停导致的定时器堆积，保证淡出逻辑的准确性。
3. 循环条件优化：把i != 257改成i <= 256，更符合16×16=256的逻辑，避免不必要的困惑。

内容的提问来源于stack exchange，提问作者zach