鼠标悬停后出现小提示框实现方法
大家在网页上会经常看到某些图标或文字，当鼠标悬停后会在四周某个位置出现一个简短的文字提示，这种提示分为两种，一种是提示固定的文字，例如放在qq图标上，会显示固定的文字“QQ”；第二种是显示鼠标所在标签的完整文字叙述，例如放在标签：“床前明月光，疑是...”，鼠标悬停后会显示完整诗句：“床前明月光，疑是地上霜”。本文就来讲述如何实现上述两种提示方法。
一、提示固定词语
这种提示因为是固定提示词，所以比较简单，使用伪类+伪元素来实现即可，代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 清除页面内外边距 */*{padding: 0;margin: 0;}/* 给鼠标需要悬停的元素添加相对定位，方便调整提示词的位置 */.one{position: relative;}/* 使用伪类：hover和伪元素：：before */.one:hover::before{content: "提示";/* 固定的提示词，案例数据，开发过程中按照实际情况调整 */position: absolute;/*设置绝对定位，方便调整提示词位置*/top: 30px;/* 距离父标签上方偏移量，案例数据，开发过程中按照实际情况调整 */left: 30px;/* 距离父标签左方偏移量，案例数据，开发过程中按照实际情况调整 */background-color: rgba(0,0,0,.8);/* 背景颜色，案例数据，开发过程中按照实际情况调整 */color: white;/* 文字颜色，案例数据，开发过程中按照实际情况调整 */}</style>
</head>
<body><div class="one">悬停出现提示词</div>
</body>
</html> 结果如图所示：
二、提示词为标签内文字
第一种方法：和上述提示固定文字做法相同，只需要将伪元素里的content设置为标签内内容就行。
该方法优点是使用比较方便，缺点是只能提示固定词语。
第二种方法：只需要略微修改上方代码就行，代码如下(注释部分为发生变化的地方)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}.one{position: relative;}.one:hover::before{content: attr(title);/* 使用attr获取标签的属性内容 */position: absolute;top: 30px;left: 30px;background-color: rgba(0,0,0,.8);color: white;}</style>
</head>
<body><!-- 给标签添加一个属性，属性值为标签的内容 --><div class="one" title="提示框">悬停出现提示词</div>
</body>
</html>该方法缺点是需要自定义一个属性并且在框架中，不同组件中的标签都需要单独写一个，优点是：可以在提示框中提示任意提示词，也可适用于vue，react等框架。
为了优化上述方法，大家也可以自行封装一个鼠标悬停后提示相应词的组件来优化代码。
相关文章：
鼠标悬停后出现小提示框实现方法
大家在网页上会经常看到某些图标或文字，当鼠标悬停后会在四周某个位置出现一个简短的文字提示，这种提示分为两种，一种是提示固定的文字，例如放在qq图标上，会显示固定的文字“QQ”；第二种是显示鼠标所在标签…...
计算机视觉常用数据集Foggy Cityscapes的介绍、下载、转为YOLO格式进行训练
我在寻找Foggy Cityscapes数据集的时候花了一番功夫，因为官网下载需要用公司或学校邮箱邮箱注册账号，等待审核通过后才能进行下载数据集。并且一开始我也并不了解Foggy Cityscapes的格式和内容是什么样的，现在我弄明白后写下这篇文章…...
css中的样式穿透
1. >>> 操作符 <style scoped> /* 影响子组件的样式 */ .parent >>> .child {color: red; } </style>注意：>>> 操作符在某些预处理器（如Sass）中可能无法识别，因为它不是标准的CSS语法。 …...
MMCA：多模态动态权重更新，视觉定位新SOTA | ACM MM‘24 Oral
来源：晓飞的算法工程笔记 公众号，转载请注明出处 论文: Visual Grounding with Multi-modal Conditional Adaptation 论文地址：https://arxiv.org/abs/2409.04999论文代码：https://github.com/Mr-Bigworth/MMCA 创新点 提出了多模…...
)
linux同步执行命令脚本 (xcall)
linux同步执行命令脚本 (xcall) 1、在/usr/local/bin目录下 创建xcall文件 vim /usr/local/bin/xcall2、输入内容 #!/bin/bash # 获取控制台指令 判断指令是否为空 pcount$# if((pcount0)); thenecho "command can not be null !"exit fifor host in bigdata01 …...
opencv - py_imgproc - py_grabcut GrabCut 算法提取前景
文章目录 使用 GrabCut 算法进行交互式前景提取目标理论演示 使用 GrabCut 算法进行交互式前景提取 目标 在本章中 我们将了解 GrabCut 算法如何提取图像中的前景我们将为此创建一个交互式应用程序。 理论 GrabCut 算法由英国剑桥微软研究院的 Carsten Rother、Vladimir K…...
ChatGPT多模态命名实体识别
ChatGPT多模态命名实体识别 ChatGPT辅助细化知识增强！一、研究背景二、模型结构和代码任务流程第一阶段：辅助精炼知识启发式生成第二阶段：基于…...
04-Dubbo的通信协议
04-Dubbo的通信协议 Dubbo 支持的通信协议 Dubbo 框架提供了自定义的高性能 RPC 通信协议： 基于 TCP 的 Dubbo2 协议 基于 HTTP/2 的 Triple 协议 Dubbo 框架是不和任何通信协议绑定的，对通信协议的支持非常灵活，支持任意的第三方协议&#x…...
开源数据库 - mysql - innodb源码阅读 - 线程启动
线程启动源码 /** Start up the InnoDB service threads which are independent of DDL recovery.*/void srv_start_threads() {if (!srv_read_only_mode) {/* Before 8.0, it was master thread that was doing periodicalcheckpoints (every 7s). Since 8.0, it is the log …...
在美团外卖上抢券 Python来实现
在美团外卖上抢券的 Python 实现 在如今的互联网时代，自动化脚本已经成为了许多用户生活中不可或缺的工具。尤其是在购物、抢券等场景中，自动化脚本能够帮助我们节省大量的时间和精力。今天，我们将一起探索如何使用 Python 编写一个简单的脚…...
【ONLYOFFICE 文档 8.2 版本深度测评】功能革新与用户体验的双重飞跃
引言 在数字化办公的浪潮中，ONLYOFFICE 文档以其强大的在线协作功能和全面的办公套件解决方案，赢得了全球用户的青睐。随着 8.2 版本的发布，ONLYOFFICE 再次证明了其在办公软件领域的创新能力和技术实力。 一.协作编辑 PDF：团队合…...
npm入门教程18：npm发布npm包
一、准备工作 注册npm账号： 前往npm官网注册一个账号。注册过程中需要填写个人信息，并完成邮箱验证。 安装Node.js和npm： 确保你的计算机上已安装Node.js和npm。Node.js的安装包中通常包含了npm。你可以通过运行node -v和npm -v命令来检查它…...
VueSSR详解 VueServerRenderer Nutx
SSR Vue中的SSR（Server-Side Rendering，服务器端渲染）是一种将页面的渲染工作从客户端转移到服务器端的技术。以下是对Vue中SSR的详细解释： 一、SSR的工作原理 在传统的客户端渲染（CSR）中，页面的…...
构建您自己的 RAG 应用程序：使用 Ollama、Python 和 ChromaDB 在本地设置 LLM 的分步指南
在数据隐私至关重要的时代，建立自己的本地语言模型 （LLM） 为公司和个人都提供了至关重要的解决方案。本教程旨在指导您完成使用 Ollama、Python 3 和 ChromaDB 创建自定义聊天机器人的过程，所有这些机器人都托管在您的系统本地。以…...
谷歌浏览器安装axure插件
1.在生成静态原型页面的路径下，找到resources\chrome\axure-chrome-extension.crx，这就是需要的插件了。 2.将axure-chrome-extension.crx重命名成axure-chrome-extension.zip然后解压到指定的文件夹（这个文件夹不能删除, 例如解压到了扩展程…...
Java唯一键实现方案
数据唯一性 1、生成UUID1.1 代码中实现1.2 数据库中实现优点缺点 2、数据库递增主键优点 3、数据库递增序列3.1 创建序列3.2 使用序列优点缺点 在Java项目开发中，对数据的唯一性要求，业务数据入库的时候保持单表只有一条记录，因此对记录中要求…...
opencv - py_imgproc - py_canny Canny边缘检测
文章目录 Canny 边缘检测目标理论OpenCV 中的 Canny 边缘检测其他资源 Canny 边缘检测 目标 在本章中，我们将学习 Canny 边缘检测的概念用于该目的的 OpenCV 函数：cv.Canny() 理论 Canny 边缘检测是一种流行的边缘检测算法。它由 John F. Canny 于1…...
Spring Boot 创建项目详细介绍
上篇文章简单介绍了 Spring Boot（Spring Boot 详细简介！），还没看到的读者，建议看看。 下面，介绍一下如何创建一个 Spring Boot 项目，以及自动生成的目录文件作用。 Maven 构建项目 访问 http…...
70B的模型需要多少张A10的卡可以部署成功，如果使用vLLM
部署一个 70B 的模型（如 defog/sqlcoder-70b-alpha）通常需要考虑多个因素，包括模型的内存需求和你的 GPU 配置。 1. 模型内存需求 大约计算，一个 70B 参数的模型在使用 FP16 精度时大约需要 280 GB 的 GPU 内存。对于 A10 GPU&a…...
clickhouse配置用户角色与权限
首先找到user.xml文件，默认在/etc/clickhouse-server路径下 一、配置角色 找到标签定义 <aaaa><readonly>1</readonly><allow_dll>0</allow_dll> </aaaa>其中aaaa为角色名称，readonly为只读权限（0–代表…...
深入剖析AI大模型：大模型时代的 Prompt 工程全解析
今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
抖音增长新引擎：品融电商，一站式全案代运营领跑者
抖音增长新引擎：品融电商，一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接：344. 反转字符串 双指针法，两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...
Oracle11g安装包
Oracle 11g安装包 适用于windows系统，64位 下载路径 oracle 11g 安装包...
【SpringBoot自动化部署】
SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一，能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时，需要添加Git仓库地址和凭证，设置构建触发器（如GitHub…...
消防一体化安全管控平台：构建消防“一张图”和APP统一管理
在城市的某个角落，一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延，滚滚浓烟弥漫开来，周围群众的生命财产安全受到严重威胁。就在这千钧一发之际，消防救援队伍迅速行动，而豪越科技消防一体化安全管控平台构建的消防“…...