js中的事件-鼠标悬浮和离开事件onmouseover和onmouseout

已于 2023-11-15 13:47:32 修改
阅读量1.8k 收藏
点赞数 17
分类专栏： # JS 文章标签： javascript 开发语言 onmouseover onmouseout
于 2023-11-14 21:19:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65152767/article/details/134408145
版权

1、 HTML

<!DOCTYPE html>
<html lang="zh_CN">
<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>js-DOM/BOM实战</title>
    <link href="style/demo09.css" rel="stylesheet"></link>
    <script>
        function showBGColor() {
            //window.event表示当前发生的事件 ”window.“可以省略
            //console.log(window.event);    object MouseEvent
            //alert(window.event);          object MouseEvent
            let obj = window.event.srcElement;
            //console.log(obj);   //发现obj是td，而不是tr。事件传递现象
            let td=obj;
            //parentElement:父元素   td的父元素是tr。tr有很多td子元素
            let tr = td.parentElement;
            tr.style.backgroundColor = "purple";
        }
        function clearBGColor() {
            let td = window.event.srcElement;
            let tr = td.parentElement;
            tr.style.backgroundColor = "transparent";
        }
    </script>
</head>
<body>
    <div id="div0">
        <div id="div_title">欢迎使用水果库存系统</div>
        <div id="div2">
            <table id="fruit_tbl">
                <tr>
                    <th class="w10"><input type="checkbox" /></th>
                    <th class="w20">名称</th>
                    <th class="w20">单价</th>
                    <th class="w20">数量</th>
                    <th class="w20">小计</th>
                    <th class="w10">操作</th>
                </tr>
                <!-- on:当...时候  mouse:鼠标  over:在...上-->
                <!--当鼠标悬浮在这个tr上时,调用showBGColor()这个方法-->
                <tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
                    <td><input type="checkbox" /></td>
                    <td>苹果</td>
                    <td>5</td>
                    <td>2</td>
                    <td>10</td>
                    <td><img src='imgs/del.png' class="delBtn"/></td>
                </tr>
                <tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
                    <td><input type="checkbox" /></td>
                    <td>菠萝</td>
                    <td>3</td>
                    <td>5</td>
                    <td>15</td>
                    <td><img src='imgs/del.png' class="delBtn"/></td>
                </tr>
                <tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
                    <td><input type="checkbox" /></td>
                    <td>哈密瓜</td>
                    <td>4</td>
                    <td>5</td>
                    <td>20</td>
                    <td><img src='imgs/del.png' class="delBtn"/></td>
                </tr>
                <tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
                    <td><input type="checkbox" /></td>
                    <td>葡萄</td>
                    <td>10</td>
                    <td>5</td>
                    <td>50</td>
                    <td><img src='imgs/del.png' class="delBtn"/></td>
                </tr>
                <tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
                    <td><input type="checkbox" /></td>
                    <td>青梅</td>
                    <td>10</td>
                    <td>5</td>
                    <td>50</td>
                    <td><img src='imgs/del.png' class="delBtn"/></td>
                </tr>
                <tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
                    <td><input type="checkbox" /></td>
                    <td>人参果</td>
                    <td>10</td>
                    <td>5</td>
                    <td>50</td>
                    <td><img src='imgs/del.png' class="delBtn"/></td>
                </tr>
                <tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
                    <td><input type="checkbox" /></td>
                    <td>菠萝蜜</td></td>
                    <td>10</td>
                    <td>5</td>
                    <td>50</td>
                    <td><img src='imgs/del.png' class="delBtn"/></td>
                </tr>
                <tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
                    <td><input type="checkbox" /></td>
                    <td>西红柿</td>
                    <td>10</td>
                    <td>5</td>
                    <td>50</td>
                    <td><img src='imgs/del.png' class="delBtn"/></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

 2、demo09.css

*{
    color:rgb(3, 31, 2);
    font-weight: lighter;
}
body{
    padding:0;
    margin:0;
    background-color: rgb(3, 31, 2);
}
#div0{
    width:80%;
    border:0px solid red;
    background-color: rgb(209, 230, 235);
    margin-left:10%;
    padding-top:48px;
    padding-bottom:48px;
    margin-top:8px;
}
#div_title{
    width:80%;
    margin-left:10%;
    text-align: center;
    font-size:24px;
    letter-spacing: 4px;
    margin-bottom:16px;
}

#div2{
    margin-left:10%;
    border:0px solid red;
    width:80%;
}

.delBtn{
    width:16px;
    height:16px;
}
#fruit_tbl , #fruit_tbl td, #fruit_tbl th {
    border:1px solid lightgray;
    text-align: center;
}
#fruit_tbl{
    width:100%;
    line-height: 32px;
    border-collapse: collapse;
}
.w10{
    width:10%;
}
.w15{
    width:15%;
}
.w20{
    width:20%;
}

 

小丁学Java
关注
  • 17
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
博客
固定Linux的ip地址，通过图形化界面操作，简单易上手
05-27 1131
固定Linux的ip地址，通过图形化界面操作，简单易上手。
博客
运行SpringBootTest报 UnsatisfiedDependencyException 和 NoSuchBeanDefinitionException 异常的解决思路分析
05-22 746
运行SpringBootTest报 UnsatisfiedDependencyException 和 NoSuchBeanDefinitionException 异常的解决思路分析。
博客
Parameter index out of range (2 ＞ number of parameters, which is 1【已解决】
07-25 676
在xml中，注释尽量用下面这种的-- -->这种注释形式被称为 HTML 注释。它用于在 HTML 代码中添加注释，注释的内容不会在网页中显示，仅作为开发人员的备注或用于临时禁用部分 HTML 代码。
博客
无法解析插件 org.apache.maven.plugins:maven-war-plugin:3.2.3（已解决）
07-25 624
就转为javaweb项目了，但是我后悔了，想要还原成springboot项目，点开项目结构关于web的都移除了，还是不行，控制台报下面的错误。最后终于发现在pom.xml文件里war，改成jar就可以解决了，刚才报红的变成jar插件，就修复了。最开始我想把springboot项目转为javaweb项目，然后我点击下面这个插件。
博客
安装 cpu-z_2.10-cn.exe
07-24 163
VCV
博客
Mongodb入门介绍
07-24 273
保存的数据是JSON（BSON），数据不要求一样。文档保存在集合中，集合保存在数据库中同一个集合中的数据可以不同，但是一般习惯上保存一类相同结构的数据。
博客
在Windows系统中，快速打开环境变量窗口的4种方法
07-23 928
以上方法均可在Windows系统中快速打开环境变量窗口，用户可以根据自己的喜好和习惯选择合适的方法。
博客
SQLyog Ultimate v12.09（64 bit）连接mysql8时报错（plugin caching_sha2_password could not be loaded），已解决
07-22 493
错误号码2058：plugin caching_sha2_password could not be loaded。解决方法： 一种是升级SQLyog和Navicat（新版SQLyog和Navicat不会出现此问题），另一种是把MySQL用户登录密码加密规则还原成mysql_native_password。
博客
开发软件激活
07-22 227
https://www.exception.site/激活相关文章链接
博客
nginx全局块的user指令
07-17 943
修改nginx.conf配置文件中的#user nobody;为user www;user:用于配置运行Nginx服务器的 worker进程。如果两个地方都进行了设置，最终生效的是配置文件中的配置。发现配置文件测试失败，这个时候我们需要创建一个用户www。页面会报403拒绝访问的错误。
博客
Linux中nohup（no hang up）不挂起，用于在系统后台不挂断地运行命令，即使退出终端也不会影响程序的运行。
07-17 323
这个命令在Linux或Unix系统中非常有用，主要用于在系统后台不挂断地运行命令，即使退出终端也不会影响程序的运行。默认情况下（非重定向时），nohup会将输出写入一个名为nohup.out的文件到当前目录下，如果当前目录的nohup.out文件不可写，输出会被重定向到$HOME/nohup.out文件中。在 Linux 系统中，使用“nohup”命令可以让程序在用户退出登录后仍然在后台运行，不会因为终端关闭或用户注销而被挂起中断。命令会将运行的程序与终端分离，这样即使终端关闭，程序也会继续在后台运行。
博客
which 命令在Linux中是一个快速查找可执行文件位置的工具
07-16 716
本身并不直接支持这样的用法；这里提到的推荐用法更多是一种概念上的指导，实际上你可能需要结合其他工具（如。命令在 Linux 中用于查找并显示指定命令的绝对路径。可以显示别名和 shell 函数的完整路径。例如，你可以通过管道将。命令时遇到任何问题或发现任何 bug，可以向。命令的输出写入标准输入，这样。等）来实现类似的功能。
博客
汇总国内镜像提供了Redis的下载地址
07-16 681
要在Windows上安装Redis，您可以从官方网站下载Redis的Windows版本。然而，由于网络原因，直接从官方网站下载可能会比较慢。幸运的是，有一些国内镜像提供了Redis的下载，这可以加快下载速度。在使用这些镜像下载Redis时，请确保选择与您的Windows系统架构（32位或64位）相匹配的版本。下载完成后，通常是一个压缩文件，您需要解压并按照官方文档进行配置和启动Redis服务。如果上述链接不再有效，建议访问相应镜像站的主页搜索最新版本的Redis。
博客
Windows命令行（CMD）中，tasklist | findstr（搜索并显示包含特定字符串的进程信息）
07-16 579
但是，请注意，PID是数值，而进程名称是文本字符串。如果你正在搜索PID，确保不要包含任何前缀或空格，因为。你也可以结合使用进程名称和PID的一部分来搜索，但这样做可能会返回不期望的结果，因为。命令时，你可以搜索并显示包含特定字符串的进程信息。注意这里没有引号包围PID，因为PID是数值，且。如果你想要找到所有属于特定用户的进程，你可以使用。更直接且可能更高效，特别是当处理大量进程时。命令的输出中PID前通常会有空格，但。命令用于显示当前运行的进程列表，而。命令的输出中PID前面通常会有空格。
博客
nginx核心配置文件结构（cat nginx.conf）
07-15 479
从前面的内容学习中，我们知道Nginx的核心配置文件默认是放在/usr/local/nginx/conf/nginx.conf，这一节，我们就来学习下nginx.conf的内容和基本配置方法。读取Nginx自带的Nginx配置文件，我们将其中的注释部分【学习一个技术点就是在Nginx的配置文件中可以使用#来注释】删除掉后，就剩下下。
博客
nginx系统环境准备
07-15 386
现，在linux2.6内核以后的版本中，selinux已经成功内核中的一部分。准备一个内核为2.6及以上版本的操作系统，因为linux2.6及以上内核才。selinux，我们的系统会更安全，但是对于我们的学习Nginx的历程中，可以说selinux是linux史上最杰出的新安全子系统之一。这一项的要求仅针对于那些对linux系统的防火墙设置规则不太清楚的，建议大家把防火墙都关闭掉，因为我们此次课程主要的内容是对Nginx。的学习，把防火墙关闭掉，可以省掉后续Nginx学习过程中遇到的诸多。
博客
在Linux上部署Java项目过程
07-12 274
在Linux上部署Java项目过程。
博客
whereis命令是 Linux 和类 Unix 系统中的一个命令行工具，用于定位二进制程序、源代码和手册页（man pages）的位置
07-11 1096
然而，请注意，Nginx 的默认网站内容目录可能因安装和配置的不同而有所不同。命令是 Linux 和类 Unix 系统中的一个命令行工具，用于定位二进制程序、源代码和手册页（man pages）的位置。命令可能不会显示所有相关的文件和目录，特别是如果 Nginx 是通过非标准方式安装的（例如，从源代码编译并安装到非标准目录）。：这些是 Nginx 的手册页文件，分别属于不同的手册部分（man3 通常用于库函数，但在这里可能是个异常；（对于源代码，但通常这个目录不包含用户安装的软件的源代码），以及。
博客
在linux中查找 / 目录下的以.jar结尾的文件（find / -name *.jar）
07-11 334
在linux中查找 / 目录下的以.jar结尾的文件（find / -name *.jar）
博客
在linux中安装docker
07-10 237
https://download.docker.com/linux/centos/docker-ce.repo这个网站不一定可以访问，所以我们可以配置更换镜像源：如果直接从官方源添加失败，您可以尝试更换为国内的镜像源。搜索结果中提到了使用阿里云的镜像源来代替官方源3。您可以使用以下命令来添加阿里云的Docker CE仓库：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值