title: CSS and Javascript: Function to change color effects hover style
body: <p>I have an element where I set a text color and a different text color for the hover state in the CSS. I have some javascript so that when I click the element, it changes the text color of the element. It works fine except that it also effects the hover CSS which I want to remain the same as the pre-clicked hover CSS. Is there anyway to either stop the hover css from being effected or to set the hover CSS?</p>
  
  <p><a href="http://jsfiddle.net/77zg8/" rel="nofollow">http://jsfiddle.net/77zg8/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>#test {color: blue;}
  #test:hover {color:green;}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="test" onClick="javascript:change()"&gt;qwerty&lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function change() {document.getElementById("test").style.color="#cc0000";};
  </code></pre>