用Javascript实现鼠标经过某一行，那一行变色
作者：互联网
用Javascript实现鼠标经过某一行，那一行变色
正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教
我们在浏览网页时，经常会遇见这种情况，就是有多行显示时，你的鼠标经过这些行，便会使这些行变成其他的颜色，离开了又变回原来的颜色，用来区分你现在鼠标所停留的是哪行。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr{
height: 30px;
background-color: skyblue;
}
tbody tr{
height: 30px;
}
tbody td{
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
.bg{
background-color: pink;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>农银金惠3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003527</td>
<td>啊实打实</td>
<td>646</td>
<td>324135</td>
<td>654</td>
<td>+0.030%</td>
</tr>
<tr>
<td>003528</td>
<td>啊实打实的</td>
<td>56465</td>
<td>653456</td>
<td>6465</td>
<td>+0.062%</td>
</tr>
</tbody>
</table>
<script>
var trs=document.querySelector('tbody').querySelectorAll('tr')
for (var i=0;i<trs.length;i++){
trs[i].onmouseover=function () {
this.className='bg'
}
trs[i].onmouseout=function () {
this.className=''
}
}
</script>
</body>
</html>
演示效果
未停留时：
停留某一行时：   
代码解释：
这里用到的就是onmouseover和onmouseout两个事件，当鼠标停留在第i行时时，触发onmouseover，使得这一行的classname变为我们规定的，在style里面已经设置好了样式。然后如果鼠标离开这一行触发onmouseout，使得classname变为空“”，使得这一行没有所对应的classname，就不修改，恢复到最开始的默认的设置。
别喷我，写的不好就劳烦指点一二，觉得有帮助就留下个大拇指点个关注再走哈哈哈！
标签：鼠标,img,Javascript,tr,一行,blog,onmouseover 来源： https://blog.csdn.net/weixin_44029226/article/details/113448735