CSS和Javascript：用于更改颜色效果悬停样式的函数

我有一个元素，在其中我为CSS中的悬停状态设置了文本颜色和不同的文本颜色。我有一些javascript，因此当我单击元素时，它会更改元素的文本颜色。它工作得很好，除了它也会影响悬停CSS，我想保持与预先单击的悬停CSS相同。是否有任何方法可以阻止悬停css生效或设置悬停css

CSS:

HTML:

---

您可以使用

！重要信息

使用类

#test {color: blue;}
#test:hover, #test.foo:hover {color:green;}
#test.foo { color : #cc0000 }

基本JavaScript：

function change() {document.getElementById("test").className = "foo"; };

---

当然，您必须切换类。

与其直接设置颜色，不如更干净（使用类更有效）

CSS:

JavaScript:

function change() {
   document.getElementById("test").className='active';
}

---

您遇到的问题是css中的特殊性概念。特定性控制应用哪些规则以及应用顺序。因为javascript更新了style元素，所以它将覆盖特定性并删除以前所有关于颜色样式的规则。因此，改为向元素添加一个类，例如“clicked”。你的新颜色在哪里

.clicked{color:red}

function change() {document.getElementById("test").class += " clicked"};

---

这将满足您的需要。

谢谢！我可以补充一点，如果元素已经有了一个带有样式的类，那么我需要给新类同样的样式。

#test {color: blue;}
#test:hover, #test.foo:hover {color:green;}
#test.foo { color : #cc0000 }

function change() {document.getElementById("test").className = "foo"; };

#test {color: blue;}
#test.active {color:red;}
#test:hover {color:green;}

function change() {
   document.getElementById("test").className='active';
}

.clicked{color:red}

function change() {document.getElementById("test").class += " clicked"};