$ (this) .children () does not work

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 color will not change, I tried to specify tr, but it does not work, so I assumed that targeting td will make it work because of the style3 class, which sets the color.

How can I make the text color change when tr hangs?

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

Answer 1

Important syntax is not supported by jQuery CSS. if you really need to add "! important", you can try the CSS DOM cssText:

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

To point this out - in most cases there is no reason why you should add importance to the inline style, because inline styles have high priority, you only need to do this to override the other! the rule.

Answer 2

When you add tr , which is not inside the table , the browser interprets it without table tags ( td and tr ) and only allows text. This behavior can be seen if you check the item here .

To fix the problem, add it inside the table.

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

demo