Question

I have a script that works great for changing the TR and TD background of my table when a condition is met.

But the CSS background hover does not work for those rows.

Is there a way to keep my background change via hover work for these rows?

Here is my current CSS that does work for rows that are not affected by the conditional function.

table.tablesorterPRINT  tr.odd:hover td {background-color: #6F0;cursor:pointer;}

Erik

if(qty<=min) { $(this).parent('tr').children('td').css('background' , 'red').css('color' , '#FFF');}
if(qty>=max) { $(this).parent('tr').children('td').css('background' , 'red').css('background' , '#FFF'); }

Answer 1

When you change the background color via JavaScript, the new style is applied by the style attribute on the element.

The style attribute takes precedence over the definitions from a class or id.

What you need to do, is to set the :hover with an !important notation, to tell the browser that no mater what, that is the hover style you want.

table.tablesorterPRINT  tr.odd:hover td {
  background-color: #6F0!important;
  cursor:pointer;
}