为什么更改css属性的基值会禁用悬停激活

Question

我有一个元素，悬停时会改变不透明度。在编写javascript的过程中，我会更改此元素的基本不透明度值。但是，即使将属性更改回其原始值，:hover选择器也不再触发
这就是代码在不更改基本值的情况下的工作方式：

#hover-div:hover{
opacity:1;
}
#hover-div{
background:red;
opacity:0.7;
}

<div id = 'hover-div'>
Hover on me.
</div>

不出所料，悬停时div会变得完全不透明。然而，如果我现在引入两行javascript来设置然后重置不透明度值，悬停效果将不再触发：

document.getElementById('hover-div').style.opacity = '1';
document.getElementById('hover-div').style.opacity = '0.7';

#hover-div:hover{
opacity:1;
}
#hover-div{
background:red;
opacity:0.7;
}

<div id = 'hover-div'>
Hover on me.
</div>

如何在保持css悬停效果的同时使用js更改基本值？(最好使用香草js/css(

Answer 1

由于CSS的特殊性，内联样式将始终覆盖CSS选择器。您想要的是使用removeProperty('opacity')实际删除不透明度样式，以便应用.hooperdiv选择器：

document.getElementById('hover-div').style.opacity = '1';
document.getElementById('hover-div').style.removeProperty('opacity');

#hover-div:hover{
opacity:1;
}
#hover-div{
background:red;
opacity:0.7;
}

<div id='hover-div'>
Hover on me.
</div>

Answer 2

这是因为Javascript将样式设置为内联，内联样式优先于外部样式表