js脚本添加mouseover与mouseout事件

发布时间:2019-10-22编辑:脚本学堂
本文介绍了使用js脚本添加mouseover与mouseout事件的方法,页面输出时,如果每行都写上 onmouseover,onmouseout会很不方便,可以采用页面输出完毕后,才用脚本将这2个事件补上去。

通常列表采用表格显示,每一行有鼠标在上面时,置亮背景,鼠标移开,则恢复原来背景,这样才够有人性。

可是页面输出时,如果每行都写上 onmouseover,onmouseout,再加上函数名,参数,行数一多的话,页面就比较大了,看上去也很傻。
可以采用页面输出完毕后,才用脚本将这2个事件补上去。

脚本:
 

复制代码 代码示例:
$(document).ready(function() { 
   $("#tbList tr").not("#trTop").not("#trHead").mouseover(function(){ $(this).css("background-color","#f1F8F9");}); 
   $("#tbList tr").not("#trTop").not("#trHead").mouseout(function(){ $(this).css("background-color","white");}); 
}) 
 

tbList是table的ID
trTop,trHead是固定背景色的行,无须这种背景置亮效果。
 

复制代码 代码示例:
<table id="tbList" width="100%" cellpadding="0" cellspacing="0"> 
<tr id="trTop"> 
<td colspan="5"> 
(www.jb200.com 脚本学堂)
</td> 
</tr> 
<tr id="trHead"> 
<td id="gap"></td> 
<td>标题</td> 
<td style="width:35px;">私密</td> 
<td style="width:45px;">日期</td> 
<td style="width:65px;">操作</td> 
</tr> 
<tr> 
<td></td> 
<td><span><a href="mine_show.aspx?id=19" title="内衣宠爱自己是爱情魔咒" target="_blank">内衣宠爱自己是爱情魔咒</a></span></td> 
<td>公开</td> 
<td>10-13</td> 
<td> 
    <a href='/Add.aspx?id=19'>编辑</a> 
    <a href="javascript:DelIt(19)">删除</a> 
</td> 
</tr> 
</table>