JavaScript+css+html鼠标指针经过某些元素时背景变色

最新推荐文章于 2024-07-26 20:46:33 发布

橘猫吃不胖～

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量6.2k

点赞数 7

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_46612221/article/details/121523536

版权

JavaScript 专栏收录该内容

68 篇文章 11 订阅

订阅专栏

鼠标指针经过某些元素时背景变色

1 案例1说明
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 = "";
                }
            }
        }

橘猫吃不胖～

关注

7
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
JavaScript+css+html鼠标指针经过某些元素时背景变色

鼠标指针经过某些元素时背景变色1 案例1说明1.1 编写HTML结构体代码1.2 编写CSS样式1.3 编写js代码2 案例2说明1 案例1说明【案例】以表格为例，使用JavaScript+css+html，设置鼠标指针经过某行时，该行变色。【案例分析】当表格中的单元格比较多时，可以在用户鼠标指针经过时把当前行添加背景色，使表格内容显得清晰和一目了然，容易阅读。本案例使用排他思想来分析，并且使用鼠标指针经过事件onmouseover和鼠标指针离开事件onmouseout实现案例效果。1.1 编写H
复制链接

扫一扫

专栏目录