JavaScript鼠标悬停逐增元素透明度仅生效一次问题排查

你的灰度模式逻辑存在两个核心错误，直接导致透明度无法持续累加：

• 每次悬停触发事件时，你都在分支内重新声明let currentOpacity = 0.1，相当于每次进入逻辑都把透明度基准重置为0.1，完全没有读取方格上一次悬停后保存的实际透明度值
• 你在做阈值判断之前就先执行了e.target.style.opacity = currentOpacity，提前把元素透明度强制设为0.1，后续就算执行+0.1的操作，最终值也永远停在0.2，和你控制台观测到的现象完全吻合。

核心思路是把透明度状态存在DOM元素本身的style属性上，每次触发悬停时先读取当前已有的透明度，在此基础上累加，直到达到1为止，修正后的grayscale分支代码如下：

case "grayscale":
  const colorPick = "#E8E8E8";
  e.target.style.backgroundColor = colorPick;
  // 读取当前元素的透明度值，转成数值类型，未设置过透明度时初始值取0
  let currentOpacity = parseFloat(e.target.style.opacity) || 0;
  // 累加0.1，用Math.min保证透明度最大不超过1
  currentOpacity = Math.min(currentOpacity + 0.1, 1);
  e.target.style.opacity = currentOpacity;
  break;

• 从element.style上读取到的属性值都是字符串类型，必须用parseFloat()转成数字后再做计算，否则会出现字符串拼接的无效值
• 用Math.min()处理上限比写if/else判断更简洁，不需要额外分支就能保证值不会超出1
• 不要在事件回调里硬编码状态初始值，所有和元素相关的可变状态优先从元素本身读取，才能保证多次触发事件时状态是连续的。

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