时间戳

首页 > 解决方案 > 从 JavaScript 禁用悬停规则

javascript - 从 JavaScript 禁用悬停规则

问题描述

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

我的CSS看起来像这样：

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

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

我用来设置css的JavaScript如下：

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

标签： javascriptcss

解决方案

使用 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因为它适用于所有浏览器。

编辑：

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

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

但请注意，IE9 不支持它。

推荐阅读