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

实现鼠标经过某个元素时弹出提示框（通常称为“工具提示”或“悬浮提示”）

news 2026/4/8 10:07:18

要实现鼠标经过某个元素时弹出提示框（通常称为“工具提示”或“悬浮提示”），你可以使用 JavaScript 结合 CSS 来创建这个效果。以下是详细步骤，包括 HTML、CSS 和 JavaScript 的代码示例。

  1. HTML 结构

首先，创建一个简单的 HTML 结构，其中包含一个鼠标经过的元素和一个隐藏的提示框。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Tooltip Example</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="tooltip-container"><span class="hover-target">Hover over me!</span><div class="tooltip">This is a tooltip message!</div></div><script src="script.js"></script>
</body>
</html>
  1. CSS 样式

接下来，为提示框和目标元素添加样式。我们将设置提示框的默认隐藏状态，并定义它的外观。

body {font-family: Arial, sans-serif;
}.tooltip-container {position: relative; /* 使工具提示相对于父元素定位 */display: inline-block; /* 使得容器根据内容自适应 */
}.hover-target {cursor: pointer; /* 鼠标悬停时显示指针 */padding: 10px;background-color: #007bff;color: white;border-radius: 5px;
}.tooltip {display: none; /* 默认隐藏 */position: absolute; /* 绝对定位 */bottom: 100%; /* 提示框位置在目标元素上方 */left: 50%;transform: translateX(-50%); /* 水平居中 */background-color: #333; /* 提示框背景颜色 */color: #fff; /* 提示框文字颜色 */padding: 5px;border-radius: 5px;white-space: nowrap; /* 防止文字换行 */z-index: 10; /* 确保提示框在其他元素之上 */
}
  1. JavaScript 代码

最后，使用 JavaScript 来控制提示框的显示和隐藏。你可以使用 mouseover 和 mouseout 事件来实现这个功能。

// 获取目标元素和提示框元素
const hoverTarget = document.querySelector('.hover-target');
const tooltip = document.querySelector('.tooltip');// 当鼠标移入目标元素时显示提示框
hoverTarget.addEventListener('mouseover', () => {tooltip.style.display = 'block'; // 显示提示框
});// 当鼠标移出目标元素时隐藏提示框
hoverTarget.addEventListener('mouseout', () => {tooltip.style.display = 'none'; // 隐藏提示框
});

效果
在这个示例中，当用户将鼠标悬停在“Hover over me!”文本上时，提示框将会显示出来，提示内容为“This is a tooltip message!”。当鼠标移开时，提示框将自动隐藏。

mouseover 和 mouseout 是两个常用的 JavaScript 事件，通常用于处理鼠标与元素之间的交互。这两个事件可以用于创建交互式和动态的用户界面，增强用户体验。以下是对这两个事件的详细介绍。

1. mouseover 事件

mouseover 事件在鼠标指针移到某个元素上方时触发。此事件会在鼠标进入元素或其子元素时被触发。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Mouseover Event Example</title><style>.box {width: 200px;height: 200px;background-color: lightblue;border: 2px solid blue;text-align: center;line-height: 200px;font-size: 24px;margin: 20px;transition: background-color 0.3s;}</style>
</head>
<body><div class="box">Hover me!</div><script>const box = document.querySelector('.box');box.addEventListener('mouseover', () => {box.style.backgroundColor = 'lightcoral'; // 改变背景色box.textContent = 'Mouse Over!';});</script>
</body>
</html>

解析
当鼠标指针移动到 .box 元素上方时，mouseover 事件会被触发，背景颜色将改变为 lightcoral，并且文本内容会更新为“Mouse Over!”。

2. mouseout 事件

mouseout 事件在鼠标指针离开某个元素或其子元素时触发。这个事件会在鼠标移出元素时被触发。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Mouseout Event Example</title><style>.box {width: 200px;height: 200px;background-color: lightblue;border: 2px solid blue;text-align: center;line-height: 200px;font-size: 24px;margin: 20px;transition: background-color 0.3s;}</style>
</head>
<body><div class="box">Hover me!</div><script>const box = document.querySelector('.box');box.addEventListener('mouseout', () => {box.style.backgroundColor = 'lightblue'; // 恢复背景色box.textContent = 'Hover me!'; // 恢复文本});</script>
</body>
</html>

解析
当鼠标指针离开 .box 元素时，mouseout 事件会被触发，背景颜色将恢复为 lightblue，并且文本内容会更新为“Hover me!”。

3. mouseover 与 mouseenter 的区别

  • mouseover 事件会在鼠标进入元素及其所有子元素时触发。
  • mouseenter 事件仅在鼠标进入目标元素本身时触发，而不会在子元素上触发。这使得 mouseenter 和
  • mouseleave 事件不会像 mouseover 和 mouseout 那样产生多次触发。

4. mouseout 与 mouseleave 的区别

  • mouseout 事件在鼠标移出元素及其子元素时触发。
  • mouseleave 事件仅在鼠标离开目标元素本身时触发。

5. 使用场景

  • 用户界面交互: 可以用于实现动态按钮、菜单、图片等效果。
  • 图像悬停效果: 鼠标悬停时改变图像或显示描述文本。
  • 动态反馈: 提供视觉反馈，例如在鼠标悬停时突出显示某些内容。

相关文章：

实现鼠标经过某个元素时弹出提示框（通常称为“工具提示”或“悬浮提示”）

要实现鼠标经过某个元素时弹出提示框&#xff08;通常称为“工具提示”或“悬浮提示”&#xff09;&#xff0c;你可以使用 JavaScript 结合 CSS 来创建这个效果。以下是详细步骤&#xff0c;包括 HTML、CSS 和 JavaScript 的代码示例。 HTML 结构 首先&#xff0c;创建一个简…...

编程日记 2024/10/20 4:14:35

【GAMES101笔记速查——Lecture 17 Materials and Appearances】

目录 1 材质和外观 1.1 自然界中&#xff0c;外观是光线和材质共同作用的结果 1.2 图形学中&#xff0c;什么是材质&#xff1f; 1.2.1 渲染方程严格正确&#xff0c;其中BRDF项决定了物体的材质 1.2.2 漫反射材质 &#xff08;1&#xff09;如何定义漫反射系数&#xff1…...

编程日记 2024/10/20 4:13:34

对于从vscode ssh到virtualBox的timeout记录

如题&#xff0c;解决方式如下&#xff1a; 1.把虚拟机关机退出来&#xff0c;在这个界面进行网络设置&#xff1a;选桥接网卡 2.然后再进系统&#xff0c;使用命令 ip addr查看如今的ip地址&#xff0c;应该和在本机里面看到的是一个网段 3.打开vscode&#xff0c;该干啥干…...

编程日记 2024/10/20 4:12:33

鸿蒙原生应用扬帆起航

就在2024年6月21日华为在开发者大会上发布了全新操作的系统HarmonyOS Next开发测试版&#xff0c;网友们把它称之为“称之为纯血鸿蒙”。因为在此之前鸿蒙系统底层式有两套基础架构的&#xff0c;一套是是Android的AOSP&#xff0c;一套是鸿蒙的Open Harmony&#xff0c;因为早…...

编程日记 2024/10/20 4:10:30

《计算机视觉》—— 表情识别

根据计算眼睛、嘴巴的变化&#xff0c;判断是什么表情结合以下两篇文章来理解表情识别的实现方法 基于 dilib 库的人脸检测 https://blog.csdn.net/weixin_73504499/article/details/142977202?spm1001.2014.3001.5501 基于 dlib 库的人脸关键点定位 https://blog.csdn.net/we…...

编程日记 2024/10/20 4:09:29

NVIDIA Aerial Omniverse

NVIDIA Aerial Omniverse 数字孪生助力打造新一代无线网络 文章目录 前言一、从链路级仿真到系统级仿真二、转变无线研发方式1. 开放且可定制的模块化平台2. 适用于 6G 标准化的 3GPP 兼容平台3. 部署前测试4. AI 和 ML 在数字孪生中的应用5. 高级物理精准的电磁求解器6. 合作伙…...

编程日记 2024/10/20 4:08:28

QT程序报错解决方案：Cannot queue arguments of type ‘QTextCharFormat‘ 或 ‘QTextCursor‘

项目场景&#xff1a; 项目场景&#xff1a;基于QT实现的C某程序&#xff0c;搭载在Linux环境中。 问题描述 执行程序时&#xff0c;发现log中报错如下内容&#xff1a; QObject::connect: Cannot queue arguments of type QTextCharFormat (Make sure QTextCharFormat is r…...

编程日记 2024/10/20 4:06:25

MySQL知识点_03

MySQL 命令大全 基础命令 操作命令连接到 MySQL 数据库mysql -u 用户名 -p查看所有数据库SHOW DATABASES;选择一个数据库USE 数据库名;查看所有表SHOW TABLES;查看表结构DESCRIBE 表名; 或 SHOW COLUMNS FROM 表名;创建一个新数据库CREATE DATABASE 数据库名;删除一个数据库D…...

编程日记 2024/10/20 4:04:24

leetcode:744. 寻找比目标字母大的最小字母（python3解法）

难度&#xff1a;简单 给你一个字符数组 letters&#xff0c;该数组按非递减顺序排序&#xff0c;以及一个字符 target。letters 里至少有两个不同的字符。 返回 letters 中大于 target 的最小的字符。如果不存在这样的字符&#xff0c;则返回 letters 的第一个字符。 示例 1&a…...

编程日记 2024/10/20 4:03:23

2015年-2016年 软件工程程序设计题(算法题)实战_c语言程序设计数据结构程序设计分析

文章目录 2015年1.c语言程序设计部分2.数据结构程序设计部分 2016年1.c语言程序设计部分2.数据结构程序设计部分 2015年 1.c语言程序设计部分 1.从一组数据中选择最大的和最小的输出。 void print_maxandmin(double a[],int length) //在一组数据中选择最大的或者最小的输出…...

编程日记 2024/10/20 4:02:22

整理一下实际开发和工作中Git工具的使用 (持续更新中)

介绍一下Git 在实际开发和工作中&#xff0c;Git工具的使用可以说是至关重要的&#xff0c;它不仅提高了团队协作的效率&#xff0c;还帮助开发者有效地管理代码版本。以下是对Git工具使用的扩展描述&#xff1a; 版本控制&#xff1a;Git能够跟踪代码的每一个修改记录&#x…...

编程日记 2024/10/20 4:01:21

Axios 的基本使用与 Fetch 的比较、在 Vue 项目中使用 Axios 的最佳实践

文章目录 1. 引言2. Axios 的基本使用2.1 安装 Axios2.2 发起 GET 请求2.3 发起 POST 请求2.4 请求拦截器2.5 设置全局配置 3. Axios 与 Fetch 的比较3.1 Axios 与 Fetch 的异同点3.2 Fetch 的基本使用3.3 使用 Fetch 处理 POST 请求 4. 讨论在 Vue 项目中使用 Axios 的最佳实践…...

编程日记 2024/10/20 4:00:20

Dockerfile样例

一、基础jar镜像制作 ## Dockerfile FROM registry.openanolis.cn/openanolis/anolisos:8.9 RUN mkdir /work ADD jdk17.tar.gz fonts.tar.gz /work/ RUN yum install fontconfig ttmkfdir -y && yum clean all && \chmod -R 755 /work/fonts ADD fonts.conf …...

编程日记 2024/10/20 3:59:19

MYSQL-多表查询

一、概述 1、定义 多表查询&#xff0c;也称为关联查询&#xff0c;指两个或更多个表一起完成查询操作。 2、前提条件 这些一起查询的表之间是有关系的&#xff08;一对一、一对多&#xff09;&#xff0c;它们之间一定是有关联字段&#xff0c;这个关联字段可能建立了外键…...

编程日记 2024/10/20 3:55:16

MySQL改密码后不生效问题

MySQL修改密码后连接报密码错误 1.mysql修改密码命令&#xff1a; 这两种连接方式密码都必须修改 修改远程连接密码 ALTER USER ‘root’‘%’ IDENTIFIED BY ‘password’; 修改本地连接密码 ALTER USER ‘root’‘localhost’ IDENTIFIED BY ‘password’; 修改完后必须刷新…...

编程日记 2024/10/20 3:45:07

15分钟学Go 第1天：Go语言简介与特点

Go语言简介与特点 1. Go语言概述 Go语言&#xff08;又称Golang&#xff09;是由谷歌于2007年开发并在2009年正式发布的一种开源编程语言。它旨在简单、高效地进行软件开发&#xff0c;尤其适合于网络编程和分布式系统。 1.1 发展背景 多核处理器&#xff1a;随着计算机硬件…...

编程日记 2024/10/20 3:44:04

UDP/TCP协议

网络层只负责将数据包送达至目标主机&#xff0c;并不负责将数据包上交给上层的哪一个应用程序&#xff0c;这是传输层需要干的事&#xff0c;传输层通过端口来区分不同的应用程序。传输层协议主要分为UDP&#xff08;用户数据报协议&#xff09;和TCP&#xff08;传输控制协议…...

编程日记 2024/10/20 3:42:02

gitee建立/取消关联仓库

目录 一、常用指令总结 二、建立关联具体操作 三、取消关联具体操作 一、常用指令总结 首先要选中要关联的文件&#xff0c;右击&#xff0c;选择Git Bash Here。 git remote -v //查看自己的文件有几个关联的仓库git init //初始化文件夹为git可远程建立链接的文件夹…...

编程日记 2024/10/20 3:41:01

在 Windows 环境下，Git 默认会自动处理 CRLF 和 LF 之间的转换。

在 Windows 环境下&#xff0c;Git 默认会自动处理 CRLF 和 LF 之间的转换。 要确保这一点并自动处理换行符差异&#xff0c;你可以按照以下步骤配置 1. 配置 Git 自动转换 CRLF 使用 Git Bash 或命令行执行以下命令&#xff0c;设置 Git 自动处理换行符&#xff1a; git con…...

编程日记 2024/10/20 3:39:59

Kibana可视化Dashboard如何基于字段是否包含某关键词进行过滤

kinana是一个功能强大、可对Elasticsearch数据进行可视化的开源工具。 我们在dashboard创建可视化时&#xff0c;有时需要将某个index里数据的某个字段根据是否包含某些特定关键词进行过滤&#xff0c;这个时候就可以用到lens里的filter功能很方便地进行操作。 如上图所示&…...

编程日记 2024/10/20 3:38:58

正规DAPP的奖励，到底来自哪里？（Web3避坑指南）

市面上正规的DAPP项目&#xff0c;那些奖励到底源自何处&#xff1f;这是一个看似基础&#xff0c;却能筛选出绝大多数Web3坑的核心问题——很多人盲目追逐高收益&#xff0c;却从未深究“钱从哪来”&#xff0c;最终沦为资金盘的接盘侠。今天&#xff0c;我们就沉下心聊聊这个…...

编程新知 2026/4/8 8:53:44

终极指南：如何使用 Deepin Boot Maker 快速制作 Linux 启动盘

终极指南&#xff1a;如何使用 Deepin Boot Maker 快速制作 Linux 启动盘 【免费下载链接】deepin-boot-maker 项目地址: https://gitcode.com/gh_mirrors/de/deepin-boot-maker Deepin Boot Maker 是一款由 Linux Deepin 团队开发的开源启动盘制作工具&#xff0c;它让…...

编程新知 2026/4/8 8:45:17

5分钟掌握Sketch MeaXure：让设计标注变得简单高效的终极指南

5分钟掌握Sketch MeaXure&#xff1a;让设计标注变得简单高效的终极指南 【免费下载链接】sketch-meaxure 项目地址: https://gitcode.com/gh_mirrors/sk/sketch-meaxure 你是否厌倦了在设计和开发之间反复沟通尺寸和颜色值&#xff1f;Sketch MeaXure插件正是解决这一…...

编程新知 2026/4/8 8:24:37

C++虚函数关键指南

虚函数 virtual 关键字 使用场景 在基类中声明虚函数&#xff0c;允许派生类重写该函数以实现多态。 行为特点 通过基类的指针或引用调用虚函数时&#xff0c;调用的是对象实际类型&#xff08;派生类&#xff09;的函数版本。 示例代码 class Base { public:virtual void func…...

编程新知 2026/4/8 8:08:19

OpenClaw异常处理设计：Qwen3.5-9B图片任务失败自动恢复方案

OpenClaw异常处理设计&#xff1a;Qwen3.5-9B图片任务失败自动恢复方案 1. 为什么需要异常处理机制&#xff1f; 上周我尝试用OpenClawQwen3.5-9B实现证件照自动裁剪时&#xff0c;遇到了典型的"三连击"问题&#xff1a;网络波动导致图片上传中断、模型响应超时、输…...

编程新知 2026/4/8 6:48:48

清音刻墨Qwen3部署到使用：一条命令搭建，五分钟出成果

清音刻墨Qwen3部署到使用&#xff1a;一条命令搭建&#xff0c;五分钟出成果 1. 引言&#xff1a;重新定义字幕制作体验 在视频内容爆炸式增长的今天&#xff0c;字幕制作成为了许多创作者的心头之痛。传统的手动打字对时间轴不仅耗时耗力&#xff0c;而且很难达到专业级的精…...

编程新知 2026/4/8 6:01:51

GLM-4.1V-9B-Base从零开始：Docker容器内服务重启与持久化配置

GLM-4.1V-9B-Base从零开始&#xff1a;Docker容器内服务重启与持久化配置 1. 模型概述 GLM-4.1V-9B-Base是智谱开源的一款视觉多模态理解模型&#xff0c;专注于图像内容分析与中文视觉理解任务。这个9B参数规模的模型在图像识别、场景描述、目标问答等任务上表现出色&#x…...

编程新知 2026/4/8 5:15:24

告别手动录入！用Zotero+Jasminum插件自动抓取知网元数据，高效管理学位论文PDF

告别手动录入&#xff01;用ZoteroJasminum插件自动抓取知网元数据&#xff0c;高效管理学位论文PDF 每次下载几十篇学位论文后&#xff0c;最头疼的莫过于手动录入文献信息——作者、标题、导师、学校、年份...这些字段一个个复制粘贴&#xff0c;不仅耗时费力&#xff0c;还…...

编程新知 2026/4/8 5:15:24

SpringBoot多数据源事务隔离级别终极指南：动态数据源配置与分布式事务完全解析

SpringBoot多数据源事务隔离级别终极指南&#xff1a;动态数据源配置与分布式事务完全解析 【免费下载链接】dynamic-datasource dynamic datasource for springboot 多数据源 动态数据源 主从分离 读写分离 分布式事务 项目地址: https://gitcode.com/gh_mirrors/dy/dynami…...

编程新知 2026/4/8 4:28:16

如何用Synonyms实现智能问答系统：面向初学者的完整指南

如何用Synonyms实现智能问答系统&#xff1a;面向初学者的完整指南 【免费下载链接】Synonyms :herb: 中文近义词&#xff1a;聊天机器人&#xff0c;智能问答工具包 项目地址: https://gitcode.com/gh_mirrors/sy/Synonyms Synonyms是一个强大的中文近义词工具包&#…...

编程新知 2026/4/8 4:22:06