当前位置： 首页 > news >正文

JS-项目实战-鼠标悬浮变手势（鼠标放单价上生效）

news 2025/6/24 0:53:29

1、鼠标悬浮和离开事件.js

//当页面加载完成后执行后面的匿名函数
window.onload = function () {//get:获取     Element:元素    By:通过...方式//getElementById()根据id值获取某元素let fruitTbl = document.getElementById("fruit_tbl");//table.rows:获取这个表格的所有的行，返回数组let rows = fruitTbl.rows;//从 1 开始，因为 第 0 行是表头，不需要绑定事件for (let i = 1; i < rows.length; i++) {let tr = rows[i];//事件动态绑定tr.onmouseover = showBGColor;tr.onmouseout = clearBGColor;//cell:单元格、细胞//获取这一行的所有的单元格let tds = tr.cells;let priceTD = tds[2];priceTD.onmouseover = showHand;}
};
function showHand() {let priceTD = event.srcElement;//cursor光标priceTD.style.cursor = "pointer";
}
function showBGColor() {//window.event表示当前发生的事件 ”window.“可以省略// console.log(window.event);// alert(window.event);let obj = window.event.srcElement;//alert(obj);//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";
}

2、fruit.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/fruit.css" rel="stylesheet"></link><script src="js/鼠标悬浮和离开事件.js"></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><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><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><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><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><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><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><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><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>

3、fruit.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%;
}

 

在JS中实现鼠标悬浮变手势，可以使用鼠标事件和CSS样式来实现。

以下是一个实现鼠标悬浮变手势的JS代码示例：

// 获取要设置手势的元素
var element = document.getElementById("myElement");// 设置鼠标悬浮时的手势样式
element.addEventListener("mouseover", function() {element.style.cursor = "grab";
});// 设置鼠标移开时的手势样式
element.addEventListener("mouseout", function() {element.style.cursor = "default";
});

上述代码中，我们首先获取要设置手势的元素，使用 addEventListener 方法来监听鼠标事件。当鼠标悬浮在元素上时，我们将设置CSS样式来改变鼠标的手势样式为 grab，当鼠标离开元素时，我们将改变鼠标的手势样式为 default。

您可以根据需要，将 grab 或 default 替换为您所需要的手势样式，以实现您想要的效果。

要在JavaScript中实现鼠标悬浮变手势，您需要使用鼠标事件和CSS样式来实现。以下是一些基本的步骤：

  1. 选择要应用鼠标悬浮手势的元素。可以使用document.querySelector或document.querySelectorAll方法选择元素。

  2. 添加mouseover和mouseout事件监听器。当鼠标进入元素时，mouseover事件将被触发，当鼠标离开元素时，mouseout事件将被触发。

  3. 在事件监听器中添加代码，以更改元素的CSS样式，以表示鼠标悬浮手势。可以使用元素的style属性，或者添加/删除CSS类来更改样式。

  4. 使用CSS样式来定义鼠标悬浮手势。使用:hover伪类选择器，可以定义元素在鼠标悬浮时的样式。

下面是一个示例代码：

// 选择元素
const elem = document.querySelector('.my-element');// 添加事件监听器
elem.addEventListener('mouseover', () => {// 更改元素样式elem.style.cursor = 'pointer';
});elem.addEventListener('mouseout', () => {// 恢复元素样式elem.style.cursor = 'auto';
});

在CSS中，您可以使用以下代码来定义鼠标悬浮手势：

.my-element:hover {/* 定义样式 */cursor: pointer;
}

这将在鼠标悬浮在元素上时将光标更改为指针。

相关文章：

JS-项目实战-鼠标悬浮变手势（鼠标放单价上生效）

1、鼠标悬浮和离开事件.js //当页面加载完成后执行后面的匿名函数 window.onload function () {//get:获取 Element:元素 By:通过...方式//getElementById()根据id值获取某元素let fruitTbl document.getElementById("fruit_tbl");//table.rows:获取这个表格…...

编程日记 2023/11/18 3:55:46

redis运维(十一) python操作redis

一 python操作redis ① 安装pyredis redis常见错误 说明&#xff1a;由于redis服务器是5.0.8的,为了避免出现问题,默认最高版本的即可 --> 适配 ② 操作流程 核心&#xff1a;获取redis数据库连接对象 ③ Python 字符串前面加u,r,b的含义 原因&#xff1a; 字符串在…...

编程日记 2023/11/18 3:54:45

黑马程序员微服务 第五天课程 分布式搜索引擎2

分布式搜索引擎02 在昨天的学习中&#xff0c;我们已经导入了大量数据到elasticsearch中&#xff0c;实现了elasticsearch的数据存储功能。但elasticsearch最擅长的还是搜索和数据分析。 所以今天&#xff0c;我们研究下elasticsearch的数据搜索功能。我们会分别使用DSL和Res…...

编程日记 2023/11/18 3:53:43

什么是UV贴图？

UV 是与几何图形的顶点信息相对应的二维纹理坐标。UV 至关重要&#xff0c;因为它们提供了表面网格与图像纹理如何应用于该表面之间的联系。它们基本上是控制纹理上哪些像素对应于 3D 网格上的哪个顶点的标记点。它们在雕刻中也很重要。 为什么UV映射很重要&#xff1f; 默认情…...

编程日记 2023/11/18 3:52:40

从哪里下载 Oracle database 11g 软件

登入My Oracle Support&#xff0c;选择Patches & Updates 标签页&#xff0c;点击下方的Latest Patchsets链接&#xff1a; 然后单击Oracle Database&#xff0c;就可以下载11g软件了&#xff1a; 安装单实例数据库需要1和2两个zip文件&#xff0c;安装GI需要第3个zip文…...

编程日记 2023/11/18 3:51:39

Ingress安全网关

目录 文章目录 目录本节实战TCP 流量拆分&#x1f6a9; 实战&#xff1a;TCP 流量拆分-2023.11.15(测试成功) Ingress安全网关Kubernetes Ingress&#x1f6a9; 实战&#xff1a;Kubernetes Ingress-2023.11.15(测试成功) Ingress GatewayIngress Gateway&#x1f6a9; 实战&am…...

编程日记 2023/11/18 3:50:36

Jmeter控制RPS

一、前言 ​ RPS (Request Per Second)一般用来衡量服务端的吞吐量&#xff0c;相比于并发模式&#xff0c;更适合用来摸底服务端的性能。我们可以通过使用 JMeter 的常数吞吐量定时器来限制每个线程的RPS。对于RPS&#xff0c;我们可以把他理解为我们的TPS&#xff0c;我们就不…...

编程日记 2023/11/18 3:48:34

【Nginx】转发配置nginx.conf

文章目录 NginxNginx主要作用转发配置相关问题参考推荐阅读 Nginx Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器&#xff0c;同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔赛索耶夫为俄罗斯访问量第二的Rambler.ru站点&#xff08;俄文&#xff1a;Рамбл…...

编程日记 2023/11/18 3:47:32

uniapp实现下载图片到本地

uniapp实现下载图片到本地 在uniapp开发中&#xff0c;可以使用uni.downloadFile方法实现下载文件功能&#xff0c;客户端直接发起一个 HTTP GET 请求&#xff0c;返回文件的本地临时路径。 const urlPath http://192.168.0.1:8080/fileApi/logo.png uni.downloadFile({url:…...

编程日记 2023/11/18 3:46:31

spring cloud-注册中心（Eureka）

一、服务注册中心组件(*) 定义&#xff1a;服务注册中心就是在整个微服务架构单独抽取一个服务&#xff0c;该服务不做项目中任何业务功能&#xff0c;仅用来在微服务中记录微服务、对微服务进行健康状态检查&#xff0c;及服务元数据信息存储常用的注册中心&#xff1a;eurek…...

编程日记 2023/11/18 3:44:29

004 OpenCV akaze特征点检测匹配

目录 一、环境 二、akaze特征点算法 2.1、基本原理 2.2、实现过程 2.3、实际应用 2.4、优点与不足 三、代码 3.1、数据准备 3.2、完整代码 一、环境 本文使用环境为&#xff1a; Windows10Python 3.9.17opencv-python 4.8.0.74 二、akaze特征点算法 特征点检测算法…...

编程日记 2023/11/18 3:43:27

openRPA开源项目源码编译

最近接触到了一个新的领域——RPA&#xff0c;RPA全称Robotic Process Automation&#xff0c;中文名为机器人流程自动化。RPA可以视作一个数字机器人&#xff0c;它可以通过程序来模拟人与软件系统的交互过程&#xff0c;代替人工将大量重复、有规则的计算机操作自动化&#x…...

编程日记 2023/11/18 3:42:26

飞书开发学习笔记(八)-开发飞书小程序Demo

飞书开发学习笔记(八)-开发飞书小程序Demo 一.小程序开发概述 1.1 小程序开发概述 飞书开发文档中查看&#xff1a;小程序开发概述 飞书小程序是指可以运行在飞书客户端中的小程序&#xff0c;小程序的一套代码可以适配 Android、iOS、PC 多平台&#xff0c;且用户体验与飞书…...

编程日记 2023/11/18 3:41:25

Unity UI 完全解决方案

Unity UI 完全解决方案 在我学习开发 unity 游戏尝试进行 UI 的构建的过程中&#xff0c;尝试寻找当前 Unity 最为推荐的 UI 构建方式&#xff0c;或者说最优的框架方案。 在中文网里寻找了半天&#xff0c;总感觉很多文章和教程给了方案&#xff0c;但又说不清楚为啥用这个方…...

编程日记 2023/11/18 3:40:24

为什么打开idea时，没有启动页面，如何解决？

更新idea2021.2后&#xff0c;当双击idea打开时&#xff0c;发现没有启动界面&#xff0c;直接进入IDEA界面&#xff0c;中间等待时间&#xff0c;让人误以为没有打开idea成功&#xff0c;使得多次点击idea图标。 解决方案就是 在idea界面菜单栏中找到帮助&#xff08;Help)&a…...

编程日记 2023/11/18 3:39:23

golang - 嵌入静态文件打包

go-bindata - embed结合嵌入静态文件打包可执行二进制文件 ## embed 嵌入静态文件到可执行二进制文件 # 安装go-bindata go get -u github.com/jteeuwen/go-bindata/... # 打包静态文件 go-bindata web/... 执行次命令之后会在项目目录下生成bindata.go文件,示例命令中模板文…...

编程日记 2023/11/18 3:38:22

SQL题

[极客大挑战 2019]EasySQL 进行简单的尝试&#xff0c;就知道是单引号的字符型注入 万能密码进行一个简单的尝试 结果就出来了 还是要了解一下原理 输入的是1&#xff0c;形成的sql语句是错误的SELECT*FROM table_name WHERE username1and password123; 第一个单引号和第二个…...

编程日记 2023/11/18 3:37:20

GUN介绍

介绍 GNU&#xff08;GNU’s Not Unix&#xff09;是一个自由操作系统项目&#xff0c;名字是一个递归的 GNU’s Not Unix 缩写&#xff0c;其目标是创建一个类Unix的操作系统。 该项目由Richard Stallman于1983年发起&#xff0c;并由自由软件基金会&#xff08;Free Softwa…...

编程日记 2023/11/18 3:35:18

《Effective C++》条款15

在资源管理类中提供对原始资源的访问 class A {... }; int day(const A* ptr) {... } int main() {shared_ptr<A> ptr(new A);cout << day(ptr) << endl; } 这样写是错误的。因为day函数要求的参数是指针&#xff0c;而你传的实际上是一个对象。 如何解决呢&…...

编程日记 2023/11/18 3:34:16

CTFd-Web题目动态flag

CTFd-Web题目动态flag 1. dockerhub注册2. dockerfile编写3. 上传到docker仓库4. 靶场配置5. 动态flag实现 1. dockerhub注册 想要把我们的web题目容器上传到docker仓库中&#xff0c;我们需要dockerhub官网注册一个账号&#xff0c;网址如下 https://hub.docker.com/2. dock…...

编程日记 2023/11/18 3:33:16

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2025/6/21 2:42:19

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/6/17 0:54:16

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/6/18 13:47:59

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/6/21 15:43:11

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/6/15 19:02:54

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2025/6/23 6:42:48

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/6/21 12:32:43

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

编程新知 2025/6/21 6:18:34

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2025/6/21 21:07:51

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2025/6/22 11:10:34