突出表格行

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>

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

1. 如何在上面提到的表结构中实现高亮行影响？
2. 当行没有移动悬停在它上面时,如何恢复高光效果？

我正在使用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');
});

实例.