表结构如下
<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/
谢谢。
最佳答案
我会在当前悬停的行中添加一个类名。例如,您可以使用 CSS 为该行中的每个表格单元格设置特定背景颜色的样式。删除样式只需触发 mouseout
事件并删除类名即可。
CSS:
.hovered td {
background: #ddd;
}
JavaScript:
$('table tr').mouseover(function() {
$(this).addClass('hovered');
}).mouseout(function() {
$(this).removeClass('hovered');
});
关于javascript - 高亮表行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5661070/