从JavaScript禁用悬停规则
从JavaScript禁用悬停规则
提问于 2018-07-24 05:53:55
当某些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;");回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-24 05:59:09
与使用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中不支持。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51487693
复制相关文章
相似问题