Question

I have the following code:

<tr><td class="style3">test</td></tr>

and

$("tr").hover(
  function () {
    $(this).css("background-color","#d9e8cd");
    $(this).css("font-weight","bold");
    $(this).children().css("color","#222222 !important");
  }, 
  function () {
    $(this).css("background-color","");
    $(this).css("font-weight","");
    $(this).children().css("color","#4b4a4a");
  }
);

The problem is that the text colour will not change, i tried specifying the tr but it wont work so I assumed targeting the td would make it work because of the style3 class which specifies a colour.

How can I make it so that the colour of the text changes when the tr is hovered over?

This is an online demo http://jsfiddle.net/B7dMd/

Answer 1

The important syntax is not supported by jQuery CSS. if you really need to add “!important” you might want to try CSS DOM cssText:

$(this).children().css('cssText', 'color:#222222 !important');

To point it out – in most of the cases, there is no reason why you should add an !important in inline styling, because inline styles have a high priority, you’ll only have to do it to override another !important rule.