How can i avoid active and hover background

Question

i have a situation where i'm able to highlight each hover row, but active row has same background which merge up as shown below

Active and hover state merge up shown below:

Problem: as shown above in image active and hover are mixing .

here is my jsfiddle: https://jsfiddle.net/dB93J/4212/

below is my code:

 $('tbody tr').on('click',function(){ $('tbody tr').removeClass('active-class'); $(this).addClass('active-class'); }); 

 .zui-table { border: solid 1px #DDEEEE; border-collapse: collapse; border-spacing: 0; font: normal 13px Arial, sans-serif; } .zui-table thead th { background-color: #DDEFEF; border: solid 1px #DDEEEE; color: #336B6B; padding: 10px; text-align: left; text-shadow: 1px 1px 1px #fff; } .zui-table tbody td { border: solid 1px #DDEEEE; color: #333; padding: 10px; text-shadow: 1px 1px 1px #fff; } tbody tr:hover{ background:#ccc; } .active-class{ background:#ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="zui-table"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Height</th> <th>Born</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>DeMarcus Cousins</td> <td>C</td> <td>6'11"</td> <td>08-13-1990</td> <td>$4,917,000</td> </tr> <tr> <td>Isaiah Thomas</td> <td>PG</td> <td>5'9"</td> <td>02-07-1989</td> <td>$473,604</td> </tr> <tr> <td>Ben McLemore</td> <td>SG</td> <td>6'5"</td> <td>02-11-1993</td> <td>$2,895,960</td> </tr> <tr> <td>Marcus Thornton</td> <td>SG</td> <td>6'4"</td> <td>05-05-1987</td> <td>$7,000,000</td> </tr> <tr> <td>Jason Thompson</td> <td>PF</td> <td>6'11"</td> <td>06-21-1986</td> <td>$3,001,000</td> </tr> </tbody> </table> 

Answer 1

I would recommend changing the background color of the .active-class selector to a darker shade and changing the background color of the tbody tr:hover selector to a lighter shade. See the attached example. I use https://www.color-hex.com/ to look up hex codes and shades.

 $('tbody tr').on('click',function(){ $('tbody tr').removeClass('active-class'); $(this).addClass('active-class'); }); 

 .zui-table { border: solid 1px #DDEEEE; border-collapse: collapse; border-spacing: 0; font: normal 13px Arial, sans-serif; } .zui-table thead th { background-color: #DDEFEF; border: solid 1px #DDEEEE; color: #336B6B; padding: 10px; text-align: left; text-shadow: 1px 1px 1px #fff; } .zui-table tbody td { border: solid 1px #DDEEEE; color: #333; padding: 10px; text-shadow: 1px 1px 1px #fff; } tbody tr:hover{ background:#dbdbdb; } .active-class{ background:#ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="zui-table"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Height</th> <th>Born</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>DeMarcus Cousins</td> <td>C</td> <td>6'11"</td> <td>08-13-1990</td> <td>$4,917,000</td> </tr> <tr> <td>Isaiah Thomas</td> <td>PG</td> <td>5'9"</td> <td>02-07-1989</td> <td>$473,604</td> </tr> <tr> <td>Ben McLemore</td> <td>SG</td> <td>6'5"</td> <td>02-11-1993</td> <td>$2,895,960</td> </tr> <tr> <td>Marcus Thornton</td> <td>SG</td> <td>6'4"</td> <td>05-05-1987</td> <td>$7,000,000</td> </tr> <tr> <td>Jason Thompson</td> <td>PF</td> <td>6'11"</td> <td>06-21-1986</td> <td>$3,001,000</td> </tr> </tbody> </table> 

Answer 2

If you can't change the hover or active color, you can increase the width of the border on .active-class to make the separation more clear.

 $('tbody tr').on('click',function(){ $('tbody tr').removeClass('active-class'); $(this).addClass('active-class'); }); 

 .zui-table { border: solid 1px #DDEEEE; border-collapse: collapse; border-spacing: 0; font: normal 13px Arial, sans-serif; } .zui-table thead th { background-color: #DDEFEF; border: solid 1px #DDEEEE; color: #336B6B; padding: 10px; text-align: left; text-shadow: 1px 1px 1px #fff; } .zui-table tbody td { border: solid 1px #DDEEEE; color: #333; padding: 10px; text-shadow: 1px 1px 1px #fff; } tbody tr:hover{ background:#ccc; } .active-class{ background:#ccc; border: solid 4px #DDEEEE; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="zui-table"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Height</th> <th>Born</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>DeMarcus Cousins</td> <td>C</td> <td>6'11"</td> <td>08-13-1990</td> <td>$4,917,000</td> </tr> <tr> <td>Isaiah Thomas</td> <td>PG</td> <td>5'9"</td> <td>02-07-1989</td> <td>$473,604</td> </tr> <tr> <td>Ben McLemore</td> <td>SG</td> <td>6'5"</td> <td>02-11-1993</td> <td>$2,895,960</td> </tr> <tr> <td>Marcus Thornton</td> <td>SG</td> <td>6'4"</td> <td>05-05-1987</td> <td>$7,000,000</td> </tr> <tr> <td>Jason Thompson</td> <td>PF</td> <td>6'11"</td> <td>06-21-1986</td> <td>$3,001,000</td> </tr> </tbody> </table> 

Answer 3

Agreed. A little confusing, but I would recommend that you just change the color of either the hover class or the active class to avoid the confusion you seem to be seeing. Just make sure to keep the hex color the same length (3 digits for both or six digits for both, using different lengths might confuse the render). IE:

tbody tr:hover{
   background:#d7d;
}
.active-class{
   background:#ccc;
}

Hope this helps!

Answer 4

I am not sure if I understood correctly, but you are using a class in an element call .active-class with the same background colour as tr:hover .

Because :hover selector : The :hover selector can be used on all elements... This means that every element including the elements with the class .active-class will have the hover selector as well.

In other words the only way you can avoid active and hover mixing together is changing the background colour or the style of the element when .active-class (or tr:hover) is assigned to that element.

Hope this could be helpful.