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

JS 解决鼠标悬浮显示弹窗 迅速离开时弹窗显示到其他位置的延迟问题

news 2026/4/26 20:54:15

解决该问题的思路就是，判断当前鼠标的位置是否在某个div上，如果在这个div上则取消显示悬浮弹窗消息。

首先监听鼠标的移动事件

 鼠标移动时判断是否在div里面进行移动了

clientX表示鼠标X的位置

client Y表示鼠标Y的位置

拿到要判断的div元素 获取offsetLeft（鼠标距离div左侧位置）offsetTop (鼠标距离div上侧位置)

offsetLeft+offsetWidth 表示整个div的宽度

offsetTop+offsetHeight 表示整个div的高度

判断是否在div里面进行相应的将弹窗元素隐藏即可

      window.addEventListener('mousemove', function(event) {// 在鼠标移动时执行的代码var div = document.getElementById('dragDiv')var x=event.clientXvar y=event.clientYvar divx1 = div.offsetLeftvar divy1 = div.offsetTopvar divx2 = div.offsetLeft + div.offsetWidthvar divy2 = div.offsetTop + div.offsetHeightif( x < divx1 || x > divx2 || y < divy1 || y > divy2) {this.popup = true} else{console.log('在div里面移动'+this.popup)this.popup = falsedocument.getElementById('tips').style.display = 'none'}})

相关文章：

JS 解决鼠标悬浮显示弹窗 迅速离开时弹窗显示到其他位置的延迟问题

解决该问题的思路就是&#xff0c;判断当前鼠标的位置是否在某个div上&#xff0c;如果在这个div上则取消显示悬浮弹窗消息。 首先监听鼠标的移动事件 鼠标移动时判断是否在div里面进行移动了 clientX表示鼠标X的位置 client Y表示鼠标Y的位置 拿到要判断的div元素 获取off…...

编程日记 2023/8/12 5:45:22

树莓派命令行运行调用音频文件的函数，不报错，没有声音解决办法

树莓派接上音频首先需要切换音频不是HDMI&#xff0c;然后可以双击运行wav文件可以播放&#xff0c;但是&#xff1a; 命令行直接运行wav文件报错&#xff1a; Playing WAVE twzc.wav : Signed 16 bit Little Endian, Rate 16000 Hz, Mono命令行运行main方法也是无法播放&am…...

编程日记 2023/8/12 5:44:21

解决无法引入 mysql-connector-j 的问题

开发环境 Windows 10Oracle JDK 1.8Maven 3.8.8IntelliJ IDEA 2022.2.2 问题 在使用 Spring initializr 创建 Spring Boot 项目时&#xff0c;无法引入 mysql-connector-j 这个依赖&#xff0c;报错信息&#xff1a; com.mysql:mysql-connector-j:jar:unknown was not foun…...

编程日记 2023/8/12 5:43:20

解释器模式(Interpreter)

解释器模式是一种行为设计模式&#xff0c;可以解释语言的语法或表达式。给定一个语言&#xff0c;定义它的文法的一种表示&#xff0c;然后定义一个解释器&#xff0c;使用该文法来解释语言中的句子。解释器模式提供了评估语言的语法或表达式的方式。 Interpreter is a behav…...

编程日记 2023/8/12 5:42:19

python读入和读出图像

python提供了PIL库和opencv库对图像进行读取并保存。 图像读入读出 给定一张RGB的彩色图像&#xff0c;PIL库将其读入: import cv2 from PIL import Image # 读入图像 image2 Image.open(cub1.jpg) print(type(image2)) image2_array np.array(image2) print(image2_array…...

编程日记 2023/8/12 5:41:18

每日一题——最长公共前缀

题目 给你一个大小为 n 的字符串数组 strs &#xff0c;其中包含n个字符串 , 编写一个函数来查找字符串数组中的最长公共前缀&#xff0c;返回这个公共前缀。 数据范围&#xff1a;0≤n≤5000&#xff0c; 0≤len(strsi)≤5000 进阶&#xff1a;空间复杂度 O(1)&#xff0c;…...

编程日记 2023/8/12 5:40:17

iOS开发-WebRTC本地直播高分辨率不显示画面问题

iOS开发-WebRTC本地直播高分辨率不显示画面问题 在之前使用WebRTC结合ossrs进行推流时候&#xff0c;ossrs的播放端无法看到高分辨率画面问题。根据这个问题&#xff0c;找到了解决方案。 一、WebRTC是什么 WebRTC是什么呢&#xff1f; WebRTC (Web Real-Time Communicatio…...

编程日记 2023/8/12 5:39:16

python项目virtualenv环境部署正式项目和后台运行实践

pycharm创建virtualenv环境的项目&#xff1a; 在本地虚拟环境项目路径下生成依赖包记录文件&#xff0c;然后上传到linux 服务器项目路径下&#xff1a; 注意注意&#xff1a;要在虚拟环境中生成&#xff0c;才能将所有的项目依赖包构建在 requirements.txt文件中。 pip3 fre…...

编程日记 2023/8/12 5:38:15

平替 Docker - 玩转容器新利器 Podman Desktop (视频)

《OpenShift 4.x HOL教程汇总》 在 podman-desktop 1.2.1 podman 4.4 环境中验证。 文章目录 什么是 podman 和 podman-desktop安装 podman 和 podman-desktop 基本环境Image、Container 和 Pod 的基本操作拉取 Image运行 Container 将 Pod 部署到 Kubernetes安装 Kind 扩展插…...

编程日记 2023/8/12 5:37:14

nodejs+vue+elementui招聘求职网站系统的设计与实现-173lo

&#xff08;1&#xff09;管理员的功能是最高的&#xff0c;可以对系统所在功能进行查看&#xff0c;修改和删除&#xff0c;包括企业和用户功能。管理员用例如下&#xff1a; 图3-1管理员用例图 &#xff08;2&#xff09;企业关键功能包含个人中心、岗位类型管理、招聘信息…...

编程日记 2023/8/12 5:36:12

静态链接（7/13）

在一个软件项目中&#xff0c;为了完成特定功能&#xff0c;除了自定义函数&#xff0c;还可以使用别人已经封装好的函数库&#xff0c;如 C 函数库。库函数的使用避免了重复“造笼子”的重复工作&#xff0c;提高了代码复用率&#xff0c;大大减轻了软件开发的工作量。 库分为…...

编程日记 2023/8/12 5:35:11

jvs-rules API数据源配置说明（含配置APIdemo视频）

在JVS中&#xff0c;多数据源支持多种形态的数据接入&#xff0c;其中API是企业生产过程中常见的数据形态。使用数据源的集成配置&#xff0c;以统一的方式管理和集成多个API的数据。这些平台通常提供各种数据转换和处理功能&#xff0c;使得从不同数据源获取和处理数据变得更加…...

编程日记 2023/8/12 5:34:10

爬虫来介绍ChromeF12 谷歌开发者工具 -Network

了解网页基础(HTML、CSS、JavaScript) 了解HTTP基本原理 了解JSON格式 了解Ajax请求 了解爬虫基本原理 (一)、Chrome开发者工具面板概述 Elements 查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。 比如我们在Event Listener…...

编程日记 2023/8/12 5:33:09

[足式机器人]Part4 机械设计 Ch00/01 绪论+机器结构组成与连接 ——【课程笔记】

本文仅供学习使用 本文参考&#xff1a; 《机械设计》 王德伦 马雅丽课件与日常作业可登录网址 http://edu.bell-lab.com/manage/#/login&#xff0c;选择观摩登录&#xff0c;查看2023机械设计2。 机械设计-Ch00Ch01——绪论机器结构组成与连接 Ch00-绪论0.1 何为机械设计——…...

编程日记 2023/8/12 5:32:06

Android isLoggable定制属于自己的log

Android原生自带的 android.util.Log&#xff0c;其中有一个 isLoggable 方法的运用 /** * Checks to see whether or not a log for the specified tag is loggable at the specified level.** The default level of any tag is set to INFO. This means that any level abov…...

编程日记 2023/8/12 5:31:05

【Spring Boot】构建RESTful服务 — 使用Swagger生成Web API文档

使用Swagger生成Web API文档 高质量的API文档在系统开发的过程中非常重要。本节介绍什么是Swagger&#xff0c;如何在Spring Boot项目中集成Swagger构建RESTful API文档&#xff0c;以及为Swagger配置Token等通用参数。 1.什么是Swagger Swagger是一个规范和完整的框架&…...

编程日记 2023/8/12 5:30:02

【实战】 九、深入React 状态管理与Redux机制(五) —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（二十）

文章目录 一、项目起航&#xff1a;项目初始化与配置二、React 与 Hook 应用&#xff1a;实现项目列表三、TS 应用&#xff1a;JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook&…...

编程日记 2023/8/12 5:29:01

PHP傻瓜也能搭建自己框架

PHP最简单自定义自己的框架&#xff08;一&#xff09; PHP最简单自定义自己的框架创建目录结构&#xff08;二&#xff09; PHP最简单自定义自己的框架定义常量自动生成目录&#xff08;三&#xff09; PHP最简单自定义自己的框架控制器自动加载运行&#xff08;四&#xf…...

编程日记 2023/8/12 5:28:00

为什么商业基础软件需要开源

Bytebase 本身是一家商业软件公司&#xff0c;而作为最核心资产的代码从 Day 0 却是开源的。同时我们还是 star-history.com 的运营者&#xff0c;大家在各种开源渠道会看到它生成的图&#xff1a; 一直以来&#xff0c;常会被别人问起的一个问题&#xff0c;就是为什么 Byteba…...

编程日记 2023/8/12 5:26:58

【自用】云服务器 使用 docker 搭建 HomeAssistant + MQTT 物联网平台

总览 1.搭建流程概述 2.准备工作 3.开始搭建&#xff01; 4.总结 如果想看 ESP32 或其他使用 MicroPython 编程的单片机如何连接到该云服务器&#xff0c;实现 HomeAssistant 控制 单片机的内容&#xff0c;请看我这篇博客的下一篇。 一、搭建流程概述 0.总体流程 我们需要…...

编程日记 2023/8/12 5:25:57

蓝桥杯STC15单片机PCA定时器配置避坑指南：从CMOD到中断函数，这些细节别搞错

蓝桥杯STC15单片机PCA定时器配置避坑指南&#xff1a;从CMOD到中断函数&#xff0c;这些细节别搞错 当你第一次尝试将STC15单片机的PCA模块配置为定时器时&#xff0c;可能会遇到各种"玄学"问题&#xff1a;中断死活进不去、定时时间飘忽不定、甚至程序直接跑飞。这些…...

编程新知 2026/4/26 20:54:07

解锁论文秘籍：书匠策AI——期刊论文创作的“智慧锦囊”

在学术的征途上&#xff0c;期刊论文是每一位研究者展示智慧结晶、推动学科进步的重要载体。然而&#xff0c;从选题构思到最终成稿&#xff0c;每一步都充满了挑战&#xff0c;让不少学者和学生倍感压力。别担心&#xff0c;今天我们就来揭秘一个强大的学术助手— 书匠策AI官网…...

编程新知 2026/4/26 19:04:41

Python Scrapy 入门教程：从零学会抓取和解析网页数据

Python Scrapy 入门教程&#xff1a;从零学会抓取和解析网页数据 很多 Python 初学者学完基础语法后&#xff0c;都会遇到一个很实际的问题&#xff1a;怎么把网页里的数据稳定地提取下来&#xff0c;变成自己能处理的结构化数据&#xff1f; 如果你只是偶尔抓一个页面&#…...

编程新知 2026/4/26 17:50:37

ComfyUI-Florence2终极指南：3步掌握多任务视觉AI工作流

ComfyUI-Florence2终极指南&#xff1a;3步掌握多任务视觉AI工作流 【免费下载链接】ComfyUI-Florence2 Inference Microsoft Florence2 VLM 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-Florence2 你是否曾梦想拥有一个能理解图像、识别物体、提取文字甚至回…...

编程新知 2026/4/26 16:01:00

Windows触控板终极方案：mac-precision-touchpad驱动完整指南深度解析

Windows触控板终极方案&#xff1a;mac-precision-touchpad驱动完整指南深度解析 【免费下载链接】mac-precision-touchpad Windows Precision Touchpad Driver Implementation for Apple MacBook / Magic Trackpad 项目地址: https://gitcode.com/gh_mirrors/ma/mac-precisi…...

编程新知 2026/4/26 14:35:35

UE4/UE5 UMG控件速查手册：从Canvas到Widget Switcher，新手避坑指南

UE4/UE5 UMG控件速查手册&#xff1a;从Canvas到Widget Switcher&#xff0c;新手避坑指南 第一次打开虚幻引擎的UMG编辑器时&#xff0c;面对琳琅满目的控件列表&#xff0c;大多数新手都会感到迷茫——Canvas和Border有什么区别&#xff1f;什么时候该用Wrap Box而不是Unifor…...

编程新知 2026/4/26 13:59:31

从按钮到仪表盘：手把手教你用LVGL v8.3打造一个智能家居控制面板UI

从按钮到仪表盘&#xff1a;手把手教你用LVGL v8.3打造一个智能家居控制面板UI 在嵌入式设备上构建美观且响应迅速的图形界面一直是开发者的挑战。LVGL&#xff08;Light and Versatile Graphics Library&#xff09;作为一款开源嵌入式图形库&#xff0c;凭借其轻量级、硬件加…...

编程新知 2026/4/26 11:50:59

别再让Null值拖慢你的ClickHouse查询了！IFNULL、COALESCE实战避坑指南

别再让Null值拖慢你的ClickHouse查询了&#xff01;IFNULL、COALESCE实战避坑指南 当你在ClickHouse中处理数亿行数据时&#xff0c;一个不经意的Null值可能让查询性能下降50%以上。上周我们团队就遇到一个典型案例&#xff1a;用户画像分析报表的查询时间从3秒骤增到8秒&#…...

编程新知 2026/4/26 11:40:47

从防御者视角出发：手把手教你用Wireshark和ARP防火墙检测并防范Ettercap发起的ARP欺骗攻击

企业级ARP欺骗防御实战&#xff1a;用Wireshark与系统工具构建内网安全防线 最近连续三起企业数据泄露事件调查显示&#xff0c;ARP欺骗攻击已成为内网渗透的"隐形杀手"。某金融公司运维团队发现&#xff0c;攻击者仅用15分钟就通过ARP中间人攻击截获了VPN登录凭证。…...

编程新知 2026/4/26 11:34:36

8个Illustrator脚本神器：告别重复劳动，效率提升300%

8个Illustrator脚本神器&#xff1a;告别重复劳动&#xff0c;效率提升300% 【免费下载链接】illustrator-scripts Adobe Illustrator scripts 项目地址: https://gitcode.com/gh_mirrors/il/illustrator-scripts 还在为Illustrator中那些重复又枯燥的操作烦恼吗&#x…...

编程新知 2026/4/26 11:26:26