保留 CSS：使用 Javascript 更改 CSS 样式时悬停答案

【问题标题】：Retain CSS :hover when changing CSS styles with Javascript保留 CSS：使用 Javascript 更改 CSS 样式时悬停
【发布时间】：2015-06-23 08:33:19
【问题描述】：

我有一个div（作为一个按钮），它有特定的 CSS，当悬停在上面时会激活：

#btn{
    width: 80%;
    height: 125px;
    border: 1px solid #9676E8;
    border-radius: 10px;
    transition: background-color 0.25s ease;
    background-color: #B299F2;
    color: white;
}

#btn:hover{
    background-color: #9676E8;
}

注意：#9676E8 是 #B299F2 的深色调，都是蓝色。

此按钮具有切换功能，所需效果是单击它会将其背景切换为红色而不是蓝色。相关的 JavaScript 在这里：

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
    if(!toggle){
        toggle = true;
        btn.style.border = "1px solid #FF0000";
        btn.style.backgroundColor = "#AA3030";
    } else {
        toggle = false;
        btn.style.border = "1px solid #9676E8";
        btn.style.backgroundColor = "#B299F2";
    }
});

注意：#AA3030 和 #FF0000 是红色阴影。

我的问题是第一次单击按钮后，按钮变为红色（根据需要）。但是，当单击它使其变回蓝色时，之后不再有悬停效果。将鼠标悬停在它上面没有任何作用，但单击它仍然有效。

我不需要按钮在红色时具有悬停效果，但我想在蓝色时保留悬停效果。有什么办法吗？

JsFiddle Here

【问题讨论】：

在 jsfiddle 或 codepen 上建立一个演示，我们很乐意帮助您解决问题
我会建议使用一个类，将颜色放在一个类中，然后在 JS 切换中添加和删除该类。
好的，正在处理中
@iroegbu 但如果我只是改变类，过渡效果将不再需要。

标签： javascript html css hover

【解决方案1】：

这是因为 JS 设置的内联规则会覆盖任何 CSS 规则（除非它们有 !important 声明）。与其将颜色设置回相同的值，不如将其设置为空以将其重置：

else {
    toggle = false;
    btn.style.border = "";
    btn.style.backgroundColor = "";
}

【讨论】：

【解决方案2】：

如果您使用类而不是在 JS 中设置 CSS 属性，则可以通过在切换时更改类来实现。

<!-- html -->
<div id="btn" class="blue"></div>

/* Javascript */
var toggle = false;
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
    if(!toggle){
        toggle = true;
        btn.className = "red";
    } else {
        toggle = false;
        btn.className = "blue";
    }
});

/* style */
#btn{
    width: 80%;
    height: 125px;
    border-radius: 10px;
    transition: background-color 0.25s ease;
    color: white;
}
.blue {
    border: 1px solid #9676E8;
    background-color: #B299F2;
}
.red {
    border: 1px solid #FF0000;
    background-color: #AA3030;
}

.blue:hover{
    background-color: #9676E8;
}

【讨论】：