JavaScript+css+html鼠标指针经过某些元素时背景变色
Posted 橘猫吃不胖～
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript+css+html鼠标指针经过某些元素时背景变色相关的知识，希望对你有一定的参考价值。
鼠标指针经过某些元素时背景变色
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 = "";
以上是关于JavaScript+css+html鼠标指针经过某些元素时背景变色的主要内容，如果未能解决你的问题，请参考以下文章