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

Question

我有一个 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

Answer 1

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

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

Answer 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;
}

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

Retain CSS :hover when changing CSS styles with Javascript

html

javascript

css

hover