目录
一、如何使用鼠标指针经过时背景变色？
二、使用步骤
1.CSS（表格的样式）
2.表格（5行7列的一个表格）
2.Script部分（实现鼠标指针经过时背景变色效果）
总结
提示：以下是本篇文章正文内容，下面案例可供参考
一、如何使用鼠标指针经过时背景变色？
在之前学习css的时候也学过hover的使用也可以进行该操作，但是下面提到的是js的DOM操作进行鼠标指针经过事件onmouseover和鼠标指针离开事件onmouseout对点击的行进行背景变色。
二、使用步骤
1.CSS（表格的样式）
代码如下（示例）：
<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: rgb(249, 255, 192);}</style>2.表格（5行7列的一个表格）
代码如下（示例）：
<table><thead><tr><th>代码</th><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><td>2022-11-17</td></tr><tr><td>003526</td><td>广东理财30天债券</td><td>0.903</td><td>3.386</td><td>0.000</td><td>0.000</td><td>2022-11-17</td></tr><tr><td>003526</td><td>兴全合宜混合A</td><td>1.075</td><td>1.079</td><td>1.074</td><td>-0,047%</td><td>2022-11-17</td></tr><tr><td>003526</td><td>中银证券安进债券A</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0,047%</td><td>2022-11-17</td></tr><tr><td>003526</td><td>广大添天盈月度理财债券B</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0,047%</td><td>2022-11-17</td></tr></tbody></table>2.Script部分（实现鼠标指针经过时背景变色效果）
代码如下（示例）：
<script>//1-获取元素var trs = document.querySelector('tbody').querySelectorAll('tr');//2-利用循环绑定注册事件for (var i = 0; i < trs.length; i++) {//3-鼠标指针经过事件trs[i].onmouseover = function () {this.className = 'bg';};//4-鼠标指针离开事件trs[i].onmouseout = function () {this.className = '';};}</script>总结
跟着pink老师学js，这里是教我们如何使用鼠标指针经过事件onmouseover和鼠标指针离开事件onmouseout实现。
