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

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

news 2026/3/30 13:16:46

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

Chord - Ink Shadow 跨模态应用探索：连接文本与MATLAB科学计算

Chord - Ink & Shadow 跨模态应用探索&#xff1a;连接文本与MATLAB科学计算 你有没有过这样的经历&#xff1f;面对一堆实验数据&#xff0c;脑子里已经想好了要画个什么样的图来分析&#xff0c;但打开MATLAB&#xff0c;却卡在了写代码这一步。复杂的函数名、繁琐的语法…...

编程新知 2026/3/30 10:55:25

16-Kotlin高阶特性-Lambda详解

Kotlin Lambda 表达式完全指南Lambda 表达式是 Kotlin 函数式编程的核心特性之一&#xff0c;它让代码更简洁、表达力更强。无论是集合操作、协程、还是 Jetpack Compose 中的 UI 回调&#xff0c;都大量使用 lambda。本文将系统讲解 Kotlin lambda 的语法形式、含义、各种语法…...

编程新知 2026/3/30 9:49:57

Stable-Diffusion-V1-5 效率工具集：Ollama本地LLM辅助提示词生成

Stable-Diffusion-V1-5 效率工具集&#xff1a;Ollama本地LLM辅助提示词生成 你是不是也遇到过这种情况&#xff1a;脑子里有个绝妙的画面&#xff0c;但打开Stable Diffusion&#xff0c;面对那个空白的提示词输入框&#xff0c;却不知道从何写起。要么写得太简单&#xff0c…...

编程新知 2026/3/30 9:45:56

OpenClaw多模态扩展：结合百川2-13B-4bits与OCR的图像信息处理流程

OpenClaw多模态扩展&#xff1a;结合百川2-13B-4bits与OCR的图像信息处理流程 1. 为什么需要多模态能力扩展&#xff1f; 上周我需要整理一批技术文档的截图&#xff0c;包含代码片段、错误日志和流程图。手动转录不仅耗时&#xff0c;还容易出错。这让我开始思考&#xff1a…...

编程新知 2026/3/30 9:13:45

结合卷积神经网络思想优化BERT文本分割边界判定

结合卷积神经网络思想优化BERT文本分割边界判定 文本分割&#xff0c;简单来说&#xff0c;就是把一大段连续的文字&#xff0c;按照意思或者结构&#xff0c;切成一个个有意义的片段。这听起来简单&#xff0c;但在实际应用中&#xff0c;比如处理会议记录、客服对话或者网络…...

编程新知 2026/3/30 8:49:31

OpCore-Simplify高效配置实战指南：智能适配黑苹果硬件的开源工具

OpCore-Simplify高效配置实战指南&#xff1a;智能适配黑苹果硬件的开源工具 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 当你面对繁杂的黑苹果EFI…...

编程新知 2026/3/30 7:45:07

CTC语音唤醒模型在医疗语音录入系统中的应用案例

CTC语音唤醒模型在医疗语音录入系统中的应用案例 1. 引言 在医疗场景中&#xff0c;医生每天需要处理大量的病历记录工作。传统的手写或键盘输入方式不仅效率低下&#xff0c;还容易分散医生对患者的注意力。现在&#xff0c;通过CTC语音唤醒技术&#xff0c;医疗语音录入系统…...

编程新知 2026/3/30 7:29:04

Pixel Mind Decoder 数据结构优化：提升批量文本情绪处理效率

Pixel Mind Decoder 数据结构优化&#xff1a;提升批量文本情绪处理效率 1. 为什么需要优化批量处理 当你需要分析成千上万条用户评论或社交媒体内容时&#xff0c;逐条调用情绪分析模型会变得非常低效。就像在快餐店点餐一样&#xff0c;一个一个处理订单远不如批量处理来得…...

编程新知 2026/3/30 7:10:57

告别VSCode与VS：在CLion中构建LVGL模拟器的完整实践（Windows 10）

1. 为什么选择CLion开发LVGL模拟器 作为一个长期在嵌入式领域摸爬滚打的开发者&#xff0c;我深知开发环境统一的重要性。LVGL作为轻量级嵌入式GUI库&#xff0c;官方推荐了VSCode和Visual Studio作为主要开发工具&#xff0c;但这并不意味着我们不能在CLion中实现同样的功能。…...

编程新知 2026/3/30 5:52:32

SDMatte模型推理参数详解：平衡速度与精度的调优手册

SDMatte模型推理参数详解&#xff1a;平衡速度与精度的调优手册 1. 前言&#xff1a;为什么需要参数调优 第一次用SDMatte抠图时&#xff0c;你可能遇到过这种情况&#xff1a;明明模型效果很好&#xff0c;但要么等半天才出结果&#xff0c;要么生成边缘毛毛糙糙。这往往是因…...

编程新知 2026/3/30 5:20:19