Question

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

我的CSS看起来像这样：

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

触发此JavaScript时，我更改了页眉折叠颜色，但我希望它保持相同的颜色，即使将其悬停也是如此。

我用来设置CSS的JavaScript如下：

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

Answer 1

使用CSS并使用Js中的类代替使用JavaScript样式更安全：

.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不支持该功能。

从JavaScript禁用悬停规则

1 个答案:

编辑：