关于jsp中表格鼠标移动变色，表格有底色如何变色

最新推荐文章于 2023-04-27 10:34:48 发布

转载最新推荐文章于 2023-04-27 10:34:48 发布 · 2.2k 阅读

文章标签：

#css

学习笔记专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用HTML和JavaScript实现表格行在鼠标悬停时背景颜色发生变化的效果，并提供了两种不同的实现方法。

首先，

一、如果原表格没有底色的情况下：

<table border="1"  style="font-size:15px">
<tr  >
<td width="200px" align="center">等级</td>
<td width="200px" align="center">得分</td>
<td width="200px" align="center">每天最大得分</td>
<td width="200px" align="center">等级得分上限</td>
<td width="200px" align="center">等级得分下限</td>
<td width="200px" align="center">功能操作</td>
</tr>
  <s:iterator value="%{ranklist}">
  <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td width="200px" align="center"><s:property value="rankNum"></s:property></td>
   <td width="200px" align="center"><s:property value="point"></s:property></td>
   <td width="200px" align="center"><s:property value="maxPointEveryday"></s:property></td>
   <td width="200px" align="center"><s:property value="rankMaxPoint"></s:property></td>
   <td width="200px" align="center"><s:property value="rankMinPoint" ></s:property></td>
<td width="200px" align="center"><a href="RankTable!delRank.action?rankvo.rankNum=<s:property value="rankNum"/>" onclick='return delconfirm()'>删除</a></td>
   </s:iterator>
</table>

可以在tr标签中直接加上

<tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';">即可实现变色；

二、td有底色的情况下：

首先在样式中加上 .hover{background-color:#FF0000;}

然后

$(function(){ 
$('tr').hover(
_mouse_on_=function(){
this._bg=this.style.backgroundColor;
$(this).css('background', 'bisque').find('>td').each(_mouse_on_);
}, 
_mouse_off_=function(){
$(this).css('background', this._bg).find('>td').each(_mouse_off_);
}
);
});

本文转自https://www.xuebuyuan.com/2041808.html，亲测有效。