Question

我有以下表结构

<table> 
 <tbody> 
  <tr> 
    <td>Lorem</td> <td>Ipsum</td> <td>Fierent</td> 
  </tr> 
  <tr> 
    <td>Lorem ipsum</td> <td>pro ut tale erant</td> <td>mnesarchum ne</td>
  </tr>
  <tr>
    <td >mnesarchum ne </td> <td >sapientem</td> <td >fierent mnesarchum </td> 
  </tr>
 </tbody>
</table>

现在，我想突出显示鼠标悬停的行？所以，我有两个问题：

如何在上述表结构中实现高亮行影响？
当行没有移动悬停在它上面时，如何恢复高光效果？

我正在使用jQuery 1.4+，所以请建议我使用jQuery代码实现以下方法。

我为同一个创建了jsfiddle：http://jsfiddle.net/c9h5w/

感谢。

Answer 1

我将一个类名添加到当前正在悬停的行中。然后，您可以使用CSS为此行中的每个表格单元格设置一定的背景颜色，例如。删除样式只是触发mouseout事件并删除类名。

<强> CSS：

.hovered td {
    background: #ddd;
}

<强> JavaScript的：

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

Live example

Answer 2

签出：

$("table tr").hover(
            function(){
                $(this).css("background-color","#FFEFC6");
              //$(this).addClass('className'); //if ur working with class 
            },
            function(){
                $(this).css("background-color","");
              //$(this).removeClass('className'); //if ur working with class 
            }
        );

<强> CLICK HERE TO SEE THE DEMO

突出表格行

2 个答案: