title: jquery hover class change not working properly
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;style&gt;
     .highlight{
       background-color: pink;
     }
     .over{
       background-color: red;
     }
     .odd{
    background-color: lightgrey;
     }
     .even{
       background-color: gray;
     }
   &lt;/style&gt;
   &lt;head&gt;
     &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;
     &lt;/script&gt;
     &lt;script&gt;
       $(document).ready(function(){ 
         $('.c').addClass('highlight');
         $('.a').addClass('odd');
         $('.b').addClass('even');
       });
     &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h2&gt;2: Zebra Striping Demo&lt;/h2&gt;
  
      &lt;table width="200" border="1"&gt;
        &lt;caption&gt;&lt;a href="#"&gt;UP&lt;/a&gt; Zebra Striping Demo &lt;a href="#"&gt;DN&lt;/a&gt;&lt;/caption&gt;
        &lt;tr class = "a"&gt;&lt;td&gt;January&lt;/td&gt; &lt;td&gt;February&lt;/td&gt;&lt;td&gt;March&lt;/td&gt;&lt;/tr&gt;
        &lt;tr class = "b"&gt;&lt;td&gt;April&lt;/td&gt;&lt;td&gt;May&lt;/td&gt;&lt;td&gt;June&lt;/td&gt;&lt;/tr&gt;
        &lt;tr class = "c"&gt;&lt;td&gt;July&lt;/td&gt;&lt;td&gt;August&lt;/td&gt;&lt;td&gt;September&lt;/td&gt;&lt;/tr&gt;
        &lt;tr class = "a"&gt;&lt;td&gt;October&lt;/td&gt;&lt;td&gt;November&lt;/td&gt;&lt;td&gt;December&lt;/td&lt;/tr&gt;
        &lt;tr class = "b"&gt;&lt;td&gt;Monday&lt;/td&gt;&lt;td&gt;Tuesday&lt;/td&gt;&lt;td&gt;Wednesday&lt;/td&gt;&lt;/tr&gt;
        &lt;tr class = "a"&gt;&lt;td&gt;Thursday&lt;/td&gt;&lt;td&gt;Friday&lt;/td&gt;&lt;td&gt;Saturday&lt;/td&gt;&lt;/tr&gt;
        &lt;tr class = "b"&gt;&lt;td&gt;Spring&lt;/td&gt;&lt;td&gt;Summer&lt;/td&gt;&lt;td&gt;Fall&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
    &lt;/body&gt;
    &lt;script&gt;
         $("tr").hover(function(){
      $(this).addClass("over");
         }, function() {
           $(this).removeClass("over");
         });
    &lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What i am trying to do in this code is have the color change to the .over css class when hovered. So basically, with the hover function, its not changing colors for all the rows . Only the c class row is being changed when hovered upon. Advice on how to solve this?</p>