鼠标指针经过某些元素时背景变色
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 = "";}}}