JavaScript中鼠标hover元素透明度无法持续递增问题排查

初始实现代码 #

首先创建元素并添加到容器：

const cont = document.querySelector(".cont");
const square = document.createElement("div");
cont.appendChild(square);

然后为元素绑定mouseover事件，试图实现每次Hover时透明度递增0.1：

square.addEventListener("mouseover", function (e) {
    let opacity = e.target.style.opacity;
    if (opacity + 0.1 < 1) {
        e.target.style.opacity = opacity + 0.1;
    } else if (opacity + 0.1 >= 1) {
        e.target.style.opacity = 1;
    }
});

问题现象 #

执行后发现，元素透明度只能增加到0.1，后续再次Hover时，透明度始终停留在0.1，无法继续递增。

问题原因 #

核心问题在于字符串与数值的隐式转换错误：

• 初始状态下，元素未设置过行内样式的opacity，e.target.style.opacity返回空字符串""
• 第一次Hover时，"" + 0.1会拼接成字符串"0.1"，设置给元素后透明度变为0.1
• 第二次Hover时，opacity的值是字符串"0.1"，此时"0.1" + 0.1会拼接成"0.10.1"，这是无效的透明度值，浏览器无法解析，因此元素透明度保持0.1不变

可行解决方案 #

通过判断opacity是否为有效真值，并显式转换为数值类型进行运算，修复后的代码如下：

square.addEventListener("mouseover", function (e) {
    let opacity = e.target.style.opacity;
    if (opacity) { 
        e.target.style.opacity = Number(opacity) + 0.1 ;
    } else { 
        e.target.style.opacity = 0.1;
    }
});

代码逻辑说明 #

• 当opacity为空字符串（初始状态）时，进入else分支，直接设置为0.1
• 当opacity已有有效字符串值（比如"0.1"）时，用Number()将其转换为数值，再加0.1后重新赋值，保证每次都是数值运算，避免字符串拼接错误

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