title: Change Text Color on mouseover
body: <p>I'm hoping to accomplish this using pure CSS and Javascript. I'm ok with PHP as well. I'm avoiding jquery because I'm trying to learn javascript a bit more and I've found that in some word-press sites jquery doesn't always work the way I need it to. As far as I can tell I haven't made any programmatic errors, but I must be missing something because it doesn't seem to be working correctly. 
  First I'll give a link where the code can be found. <a href="http://jsfiddle.net/FFCFy/13/" rel="nofollow">http://jsfiddle.net/FFCFy/13/</a></p>
  
  <p>Next I'll give the actual code. </p>
  
  <h3>Javascript:</h3>
  
  <pre><code>setInterval(function() {
      var x = document.getElementById("div1");
      var y = document.getElementById("div2");
  
      function stext() {
          x.style.color = 'red';
          y.style.color = 'black';
      }
  
      function htext() {
          x.style.color = 'black';
          y.style.color = 'red';
      }
  }, 250);
  </code></pre>
  
  <h3>html:</h3>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
      &lt;span id="div1" style="color:black;" onmouseover="stext"   onmouseout="htext"&gt;TEXT1&lt;/span&gt;&lt;p /&gt;
      &lt;hr color="black" /&gt;
  &lt;span id="div2" style="color:red;"onmouseover="htext" onmouseout="stext"&gt;Text2&lt;/span&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Eventually I'll be modifying this to hide and show different text, but I'll get to that once I have this figured out. </p>