CSS e Javascript: Função para alterar o estilo de foco dos efeitos de cor
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?
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";};