javascript - CSS 和 Javascript : Function to change color effects hover style

Question

我有一个元素，我在其中为 CSS 中的悬停状态设置了文本颜色和不同的文本颜色。我有一些 javascript，因此当我单击元素时，它会更改元素的文本颜色。它工作正常，除了它还会影响悬停 CSS，我希望它与预单击的悬停 CSS 保持一致。有没有办法阻止 hover css 生效或设置 hover 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';
}

demonstration