javascript - 从 JavaScript 禁用悬停规则

Question

我想在触发某些 JavaScript 代码时禁用 :hover 规则。

我的 CSS 是这样的:

.headerfoldout a{
    background-color: red;
}
.headerfoldout a:hover{
    background-color: blue;
}

当这个 JavaScript 被触发时，我改变了 headerfoldout 颜色，但我希望它保持相同的颜色，即使在悬停时也是如此。

我用来设置css的JavaScript如下:

document.getElementById("headerfoldout").setAttribute("style", "background-color: green;");

Answer 1

与使用 JavaScript 应用样式相比，使用 CSS 并在 Js 中使用类更安全:

.headerfoldout a {
    background-color: red;
}

.headerfoldout a:hover {
    background-color: blue;
}

.green.headerfoldout a, .green.headerfoldout a:hover {
    background-color: green;
}

在 Js 中:

// without checking the classname
document.getElementById("headerfoldout").className += " green";

更安全的方法:

// checking the classname
var element, name, arr;
element = document.getElementById("headerfoldout");
name = "green";
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
    element.className += " " + name;
}

注意:我更喜欢className 而不是classList 因为it will work in all browsers .

编辑:

如评论中所述，classList 可用于简化代码:

 document.getElementById("headerfoldout").classList.add("green");

但请注意，IE9 不支持。