CSS和Javascript:改变颜色效果悬停样式的功能

Question

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

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';
}