我有一个带有悬停效果的按钮(颜色变化)。
button {
width: 180px;
height: 80px;
background-color: #A0522D;
}
button:hover {
background-color: #CD853F;
}
然后，我想从 js 更改背景颜色，例如当选择的按钮正确时。这就是我想到的:
buttons[i].style.backgroundColor = "#A0522D";
我还有动画的过渡属性:
button {
transition: background 0.5s ease, color 0.2s ease;
}
看来，每当我第一次更改背景颜色时，它都会完全删除悬停动画。但是，当我更改字体颜色而不是背景颜色时，情况并非如此。
你知道如何让悬停动画和改变背景颜色的js动画同时工作吗？或者我的按钮动画处理方法可能不正确？
最佳答案
这与 CSS 规则的特殊性有关。在元素上设置的规则(例如，通过设置 style 属性)将比您在 CSS 文件/样式 block 中声明的规则具有更高的特异性(除非您使用 !important )。
更好的方法是使用类来设置背景属性并更改元素上的背景属性，而不是直接设置样式:
buttons[i].className = "myClass";
这个StackOverflow answer有关于如何在 javascript 中设置 CSS 类的精彩描述。您可以在 this article 中阅读有关 CSS 特异性的更多详细信息。 .
关于javascript - 从 js 更改 css 属性会破坏 css 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18083674/