我有以下表结构
<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/ http://jsfiddle.net/c9h5w/
Thanks.
我将向当前悬停的行添加一个类名。例如,您可以使用 CSS 为该行中的每个表格单元格设置特定背景颜色的样式。删除样式只是触发一个mouseout
事件并删除类名。
CSS:
.hovered td {
background: #ddd;
}
JavaScript:
$('table tr').mouseover(function() {
$(this).addClass('hovered');
}).mouseout(function() {
$(this).removeClass('hovered');
});
实例 http://jsfiddle.net/c9h5w/1/.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)