title: jQuery hover effect over table
body: <p>I am new to jQuery and I am trying to make a hover effect on my table but I don't know how.
  I would like to make only the text red and then how to remove the red color again when the focus has been lost.</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function() {
      $('tr').hover(function() {
          $(this).css('color', 'red')
      });
  });
  &lt;/script&gt;
  
  
  &lt;table border="1"&gt;
      &lt;tr&gt;
          &lt;th&gt;ID&lt;/th&gt;
          &lt;th&gt;name&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;#1&lt;/td&gt;
          &lt;td&gt;ole&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;#2&lt;/td&gt;
          &lt;td&gt;jeffrey&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;#3&lt;/td&gt;
          &lt;td&gt;collin&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;#4&lt;/td&gt;
          &lt;td&gt;eve&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>