CODEWITHSUNDEEP
javascriptjquery
rich
rich

Reputation: 23

jquery hover class change not working properly

<html>
  <style>
   .highlight{
     background-color: pink;
   }
   .over{
     background-color: red;
   }
   .odd{
	 background-color: lightgrey;
   }
   .even{
     background-color: gray;
   }
 </style>
 <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
   </script>
   <script>
     $(document).ready(function(){	
       $('.c').addClass('highlight');
       $('.a').addClass('odd');
       $('.b').addClass('even');
     });
   </script>
  </head>
  <body>
    <h2>2: Zebra Striping Demo</h2>

    <table width="200" border="1">
      <caption><a href="#">UP</a> Zebra Striping Demo <a href="#">DN</a></caption>
      <tr class = "a"><td>January</td> <td>February</td><td>March</td></tr>
      <tr class = "b"><td>April</td><td>May</td><td>June</td></tr>
      <tr class = "c"><td>July</td><td>August</td><td>September</td></tr>
      <tr class = "a"><td>October</td><td>November</td><td>December</td</tr>
      <tr class = "b"><td>Monday</td><td>Tuesday</td><td>Wednesday</td></tr>
      <tr class = "a"><td>Thursday</td><td>Friday</td><td>Saturday</td></tr>
      <tr class = "b"><td>Spring</td><td>Summer</td><td>Fall</td></tr>
    </table>
  </body>
  <script>
       $("tr").hover(function(){
	   $(this).addClass("over");
       }, function() {
         $(this).removeClass("over");
       });
  </script>
</html>

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?

Upvotes: 1

Views: 62

Answers (2)

Draco18s no longer trusts SE
Draco18s no longer trusts SE

Reputation: 15941

This is due to the order in which your CSS is being applied.

First, any tr with .highlight gets the background color (pink). Then any tr that is .over gets its background color (replacing .highlight) and so on. Note that .even and .odd are last.

Your two options are to either re-order your CSS declarations (as in @j08691's answer) or to make .over's style be !important

    .over{
        background-color: red !important;
    }

Upvotes: 3

j08691
j08691

Reputation: 207891

Just change the order of your CSS rules so that .over is last and has precedence.

$(document).ready(function() {
  $('.c').addClass('highlight');
  $('.a').addClass('odd');
  $('.b').addClass('even');
});
$("tr").hover(function() {
  $(this).addClass("over");
}, function() {
  $(this).removeClass("over");
});
.highlight {
  background-color: pink;
}
.odd {
  background-color: lightgrey;
}
.even {
  background-color: gray;
}
.over {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>

<h2>2: Zebra Striping Demo</h2>
<table width="200" border="1">
  <caption><a href="#">UP</a> Zebra Striping Demo <a href="#">DN</a>
  </caption>
  <tr class="a">
    <td>January</td>
    <td>February</td>
    <td>March</td>
  </tr>
  <tr class="b">
    <td>April</td>
    <td>May</td>
    <td>June</td>
  </tr>
  <tr class="c">
    <td>July</td>
    <td>August</td>
    <td>September</td>
  </tr>
  <tr class="a">
    <td>October</td>
    <td>November</td>
    <td>December</td>
  </tr>
  <tr class="b">
    <td>Monday</td>
    <td>Tuesday</td>
    <td>Wednesday</td>
  </tr>
  <tr class="a">
    <td>Thursday</td>
    <td>Friday</td>
    <td>Saturday</td>
  </tr>
  <tr class="b">
    <td>Spring</td>
    <td>Summer</td>
    <td>Fall</td>
  </tr>
</table>

Upvotes: 2

Related Questions