Eu tenho um elemento onde eu defino uma cor de texto e uma cor de texto diferente para o estado de foco no CSS. Eu tenho alguns javascript para que quando eu clicar no elemento, ele mude a cor do texto do elemento. Ele funciona bem, exceto que ele também afeta o CSS do hover, que eu quero que permaneça o mesmo que o CSS hover pré-clicado. Existe alguma maneira de impedir que o css hover seja afetado ou definir o CSS do hover?

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