jQuery：在鼠标悬停时将类添加到 <tr> 以设置 <td> 样式答案

【问题标题】：jQuery: Add class to <tr> on mouseover in order to style <td>jQuery：在鼠标悬停时将类添加到 <tr> 以设置 <td> 样式
【发布时间】：2023-03-27 11:49:01
【问题描述】：

当鼠标悬停（突出显示）时，我正在尝试将一个类附加到<tr>，我将在其中设置孩子<td> 的样式。仅仅在<tr> 上添加所需的效果（背景颜色）是行不通的，因为内部<td> 的bg 属性。

我已经确定 jquery 正在运行，并且我正在使用 1.9 分钟。

这是我目前所拥有的：

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

当高亮类添加到<tr> 时，我在 CSS 中设置了相应的 .hightlight 类，如 .highlight td {} 以设置 <td> 的样式。

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

感谢任何帮助。谢谢大家。

【问题讨论】：

对我来说似乎工作正常jsfiddle.net/WUMwr
没什么，据我所知！您的脚本应该可以正常工作。你把它放在页面底部了吗？（或者如果一定要放在header里面，是不是包裹在$(document).ready(function(){ /* ... */ })里面）
我想它确实应该可以工作，但在我正在处理的文档上却没有。可能是其他东西干扰，idk。
另外，如果这不是问题，那表是动态创建的吗（在调用上述脚本之后）？

标签： javascript jquery hover mouseover addclass

【解决方案1】：

我想到的唯一事实是将您的代码放在$(document).ready() 处理程序中：

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

...也许使用更方便的.hover() 方法。

演示： http://jsfiddle.net/B2Rnz/

【讨论】：

【解决方案2】：

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

tr:hover td {
    background: #333;
}

【讨论】：

为了向后兼容。
据我所知，一些较旧的不支持悬停在非锚元素上。
@Jasd 是的...有人仍在使用该死的 IE6，它仅支持 :hover 用于 <a> 元素。

【解决方案3】：

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

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

【讨论】：

感谢您的回复，iOraelosi。