jQuery：将类添加到 <tr> 在鼠标悬停以便风格 <td>

Question

I'm trying to append a class to a <tr> when mousing over (highlight), in which I will be styling the child <td> 's. Just adding the desired effect (background color) on the <tr> won't do, because of the bg properties of the internal <td> 's.

I've made sure jquery is running, and I'm using 1.9 min.

This is what I have so far:

$('table tr').mouseover(function(){
    $(this).addClass('highlight');
}).mouseout(function(){
    $(this).removeClass('highlight');
});

I have the corresponding .hightlight class setup in CSS as in .highlight td {} to style the <td> 's when the highlight class is added to the <tr> .

I can't, for the life of me, figure out what I'm doing wrong here. I've tested that the <td> 's are styled correctly by manually adding class="highlight" to the <tr> , and that works.

Any help is appreciated. Thanks guys.

Answer 1

The only fact that comes to my mind is placing your code in the $(document).ready() handler:

$(function() {
    $("table tr").hover(function() {
        $(this).addClass("highlight");
    }, function() {
        $(this).removeClass("highlight");
    });
});

... and maybe using more handy .hover() method instead.

DEMO: http://jsfiddle.net/B2Rnz/

Answer 2

If there is no more logic involved you can also use plain CSS:

tr:hover td {
    background: #333;
}

Answer 3

You could define only one .highlight declaration and apply it to the <td> :

 $(function() {
     $('table tr').on('mouseover', 'td', function(){
           $(this).addClass('highlight');
       }).on('mouseout', 'td', function(){
           $(this).removeClass('highlight');
       });
 });