title: How do you prevent inline CSS link "color" from canceling out CSS stylesheet link "hover"?
body: <p>I want my links*** to change color when clicked, but also change color when hovered over.</p>
  
  <p>I got a javascript function to change the color when clicked, but it requires inline CSS which is keeping my style sheet's hover from working. </p>
  
  <p>Is there a way to have the inline CSS and CSS stylesheet not cancel out? Or is there another way to change the color of the link when clicked that wont cancel out the hover color? </p>
  
  <p><em>*</em>(These links are being used to show a hidden div using javascript)</p>
  
  <p><strong>script:</strong></p>
  
  <pre><code>function toggle_link(select){
  var color = select.style.color;
  select.style.color = (color == "white" ? "yellow" : "white");
  }
  </code></pre>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;div id="gdtitle"&gt;
  &lt;a class="port" href="#" onclick="toggle('gdhide');toggle_link(this);" style="color:white"&gt;Graphic Design&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css style sheet</strong></p>
  
  <pre><code>a.port{
  text-decoration: none;
  color: white;
  }
  a.port:hover{
  text-decoration: none;
  color: yellow;
  }
  </code></pre>