CSS 和 Javascript：更改颜色效果悬停样式的功能

Question

我有一个元素，我在其中为 CSS 中的悬停状态设置了文本颜色和不同的文本颜色。 我有一些 javascript，因此当我单击元素时，它会更改元素的文本颜色。 它工作正常，除了它还会影响悬停 CSS，我希望它与预单击的悬停 CSS 保持相同。 无论如何要阻止悬停 css 受到影响或设置悬停 CSS？

http://jsfiddle.net/77zg8/

CSS：

#test {color: blue;}
#test:hover {color:green;}

HTML：

<div id="test" onClick="javascript:change()">qwerty</div>

Javascript：

function change() {document.getElementById("test").style.color="#cc0000";};

Answer 1

而不是直接设置颜色，它会更干净（使用类更有效）。

CSS :

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

JavaScript :

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

示范

Answer 2

使用类！

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

基本 JavaScript：

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

当然，您必须切换课程。

Answer 3

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

.clicked{color:red}

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

这将满足您的需求。

Answer 4

你可以使用!important JSFIDDLE

#test:hover {color:green!important;}