鼠标指针经过某些元素时背景变色
1 案例1说明1.1 编写HTML结构体代码1.2 编写CSS样式1.3 编写js代码1.4 总代码2 案例2说明1 案例1说明
【案例】以表格为例，使用JavaScript+css+html，设置鼠标指针经过某行时，该行变色。
【案例分析】当表格中的单元格比较多时，可以在用户鼠标指针经过时把当前行添加背景色，使表格内容显得清晰和一目了然，容易阅读。
本案例使用排他思想来分析，并且使用鼠标指针经过事件onmouseover和鼠标指针离开事件onmouseout实现案例效果。
1.1 编写HTML结构体代码
在HTML页面中，编写一个表格，其中含有学号、姓名、性别、年龄、地址等信息。
<!-- 编写一个div，将其上下外边距调整为50像素 --><div style="margin: 50px auto;"><!-- 编写一个表格，显示边框，并且居中 --><table border="1" align="center"><!-- 编写表头 --><thead><!-- 第一行 --><tr align="center"><th width="50">学号</th><th width="100">姓名</th><th width="50">性别</th><th width="50">年龄</th><th width="200">地址</th></tr></thead><!-- 表格主体 --><tbody><!-- 第二行 --><tr align="center"><td>1001</td><td>小明</td><td>男</td><td>19</td><td>北京</td></tr><!-- 第三行 --><tr align="center"><td>1002</td><td>小红</td><td>女</td><td>18</td><td>天津</td></tr><!-- 第四行 --><tr align="center"><td>1003</td><td>小徐</td><td>男</td><td>19</td><td>上海</td></tr></tbody></table></div>
效果图如下：
1.2 编写CSS样式
css样式编写很简单，设置鼠标经过时的样式即可，这里我将背景色设置为粉色。
.bg {background-color: pink;}
1.3 编写js代码
首先获取每一行tr元素，然后给每一行绑定注册事件，鼠标经过时变成粉色，鼠标离开变回原来的颜色，使用循环排他思想设计。
//1、获取tbody下全部tr元素，返回值为一个数组var trs = document.querySelector("tbody").querySelectorAll("tr");//循环给每个tr绑定事件for (var i = 0; i < trs.length; i++) {//给每个tr绑定鼠标经过时的事件trs[i].onmouseover = function () {this.className = "bg";//鼠标经过时将背景修改为粉色}trs[i].onmouseout = function () {this.className = "";}}
效果图如下：当鼠标移动到第二行时
1.4 总代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>.bg {background-color: pink;}</style><body><!-- 编写一个div，将其上下外边距调整为50像素 --><div style="margin: 50px auto;"><!-- 编写一个表格，显示边框，并且居中 --><table border="1" align="center"><!-- 编写表头 --><thead><!-- 第一行 --><tr align="center"><th width="50">学号</th><th width="100">姓名</th><th width="50">性别</th><th width="50">年龄</th><th width="200">地址</th></tr></thead><!-- 表格主体 --><tbody><!-- 第二行 --><tr align="center"><td>1001</td><td>小明</td><td>男</td><td>19</td><td>北京</td></tr><!-- 第三行 --><tr align="center"><td>1002</td><td>小红</td><td>女</td><td>18</td><td>天津</td></tr><!-- 第四行 --><tr align="center"><td>1003</td><td>小徐</td><td>男</td><td>19</td><td>上海</td></tr></tbody></table></div><script>//1、获取tbody下全部tr元素，返回值为一个数组var trs = document.querySelector("tbody").querySelectorAll("tr");//循环给每个tr绑定事件for (var i = 0; i < trs.length; i++) {//给每个tr绑定鼠标经过时的事件trs[i].onmouseover = function () {this.className = "bg";//鼠标经过时将背景修改为粉色}trs[i].onmouseout = function () {this.className = "";}}</script></body></html>
2 案例2说明
上面的例子说明了怎样设置每行在鼠标经过时变色，接下来说明每个单元格怎样设置在鼠标经过时变色。
html和css代码与上面代码相同，需要改变的时JavaScript代码部分，因此以下代码都只修改了js部分。
方法1：直接获取所有的td元素，并且绑定事件。
//获取所有的td元素var tds = document.querySelector("tbody").querySelectorAll("td");//循环给每个td注册事件for (var i = 0; i < tds.length; i++) {//当鼠标移动到单元格上时，设置背景色tds[i].onmouseover = function () {this.className = "bg";}//当鼠标移出单元格时，去掉背景色tds[i].onmouseout = function () {this.className = "";}}
方法2：获取每一行中的所有td元素，并且绑定事件
//获取所有tr元素var trs = document.querySelector("tbody").querySelectorAll("tr");//循环每个tr，获取每个tr下的td元素for (var i = 0; i < trs.length; i++) {//获取每个td元素var tds = trs[i].querySelectorAll("td");//循环给每个td绑定注册事件for (var j = 0; j < tds.length; j++) {tds[j].onmouseover = function () {this.className = "bg";}tds[j].onmouseout = function () {this.className = "";}}}
