javascript - jQuery：在鼠标悬停时添加类以设置样式

Question

我试图<tr>在鼠标悬停（突出显示）时将一个类附加到 a 上，我将在其中设置 child<td>的样式。<tr>由于 internal 的 bg 属性，仅在上添加所需的效果（背景颜色）是行不通<td>的。

我确保 jquery 正在运行，并且我使用了 1.9 分钟。

这是我到目前为止所拥有的：

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

我.hightlight在 CSS 中设置了相应的类，.highlight td {}以便<td>在将高亮类添加到<tr>.

对于我的一生，我无法弄清楚我在这里做错了什么。我已经通过手动添加到,测试了<td>'s 的样式是否正确，并且可以正常工作。class="highlight"<tr>

任何帮助表示赞赏。多谢你们。

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

如果不涉及更多逻辑，您还可以使用纯 CSS：

tr:hover td {
    background: #333;
}

Answer 3

您只能定义一个.highlight声明并将其应用于<td>：

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