修改CSS属性基础值为何禁用:hover触发？原生JS/CSS解决方法

哎，这个问题我之前也踩过！核心原因就是CSS优先级规则在捣乱。

当你用document.getElementById('hover-div').style.opacity修改透明度时，其实是给元素添加了内联样式，而内联样式的优先级比CSS里的ID选择器（包括:hover伪类）高得多。哪怕你把opacity改回0.7，这个内联样式style="opacity: 0.7"还是会留在元素标签上，导致:hover的opacity:1永远覆盖不了它——毕竟内联样式优先级更高嘛！

下面给你几个靠谱的解决方案，按推荐程度排序：

方案1：用CSS类替代直接操作内联样式（最推荐） #

这种方式最符合CSS的设计逻辑，也方便维护：

首先在CSS里新增一个控制完全不透明的类：

#hover-div { 
  background: red; 
  opacity: 0.7; 
}
#hover-div:hover { 
  opacity: 1; 
}
/* 新增的类，用来临时设置完全不透明 */
#hover-div.full-opacity { 
  opacity: 1; 
}

然后JS里通过添加/移除类来控制状态，而不是直接修改style：

const hoverDiv = document.getElementById('hover-div');
// 临时设置为完全不透明
hoverDiv.classList.add('full-opacity');
// 恢复原状态
hoverDiv.classList.remove('full-opacity');

原理：类选择器和:hover伪类的优先级相同，当鼠标悬停时，:hover的规则会覆盖类的样式，完美保留hover效果。

方案2：用CSS变量（自定义属性）控制基础透明度 #

这是更灵活的现代CSS方案，适合需要动态调整样式的场景：

先在CSS里定义一个变量来存储基础透明度：

#hover-div {
  background: red;
  /* 定义基础透明度变量 */
  --base-opacity: 0.7;
  opacity: var(--base-opacity);
}
#hover-div:hover { 
  opacity: 1; 
}

然后JS通过修改CSS变量来改变基础值：

const hoverDiv = document.getElementById('hover-div');
// 临时设置为完全不透明
hoverDiv.style.setProperty('--base-opacity', '1');
// 恢复原状态
hoverDiv.style.setProperty('--base-opacity', '0.7');

原理：:hover的opacity:1是直接指定的值，优先级高于通过var()引用的变量值，所以悬停时依然会触发效果。

方案3：用!important强制hover生效（不推荐，应急用） #

如果实在不想改代码结构，可以给hover规则加!important，强制它的优先级最高：

#hover-div:hover { 
  opacity: 1 !important; 
}

但注意：!important会打破正常的CSS优先级规则，后续维护样式时很容易出现冲突，不到万不得已别用。

内容的提问来源于stack exchange，提问作者Leaf the Legend