鼠标悬停后出现小提示框实现方法
大家在网页上会经常看到某些图标或文字，当鼠标悬停后会在四周某个位置出现一个简短的文字提示，这种提示分为两种，一种是提示固定的文字，例如放在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–代表…...
嵌入式开发核心技术：内存管理与中断处理详解
嵌入式实习岗位面试技术要点解析1. 内存管理基础1.1 C/C内存分配机制在嵌入式系统中，内存分配主要涉及以下几个区域：栈(Stack)：用于存储局部变量、函数参数和返回地址，由编译器自动分配和释放堆(Heap)：通过malloc/free…...
超越单一工具：在快马平台探索多模型ai辅助开发的全新工作流
在开发过程中，AI辅助工具已经逐渐成为提升效率的利器。最近我在尝试使用InsCode(快马)平台时，发现它提供的多模型AI辅助开发能力，远比单一工具更加强大和灵活。下面分享一个我实践的综合示例项目，展示如何利用平台的多模型能力优化…...
从‘水变油’到‘大师一问三不知’：求实学风如何塑造科学巨匠与避免历史弯路
1. 科学史上的两副面孔：浮夸与求实 1993年，一场名为"水变油"的闹剧在国内掀起轩然大波。某"发明家"声称发明了能将水转化为燃料的"神奇添加剂"，甚至获得了部分政府部门的支持。这个明显违背能量守恒定律的&quo…...
保姆级教程：MogFace人脸检测模型-large快速上手，无需代码轻松体验
保姆级教程：MogFace人脸检测模型-large快速上手，无需代码轻松体验 1. 认识MogFace人脸检测模型 1.1 什么是MogFace MogFace是目前最先进的人脸检测方法之一，在Wider Face六项榜单上长期保持领先地位。这个模型通过三个创新点显著提升了检测…...
从SOP到AI Society：MGX多智能体协作平台如何重塑软件开发流程
1. MGX平台如何用SOP机制颠覆传统开发模式 我第一次接触MGX平台时，被它的标准化操作流程（SOP）惊艳到了。这就像把一个混乱的施工现场变成了井然有序的装配线，每个智能体都知道自己该在什么时候做什么事。传统开发中，我…...
简述双亲委派机制以及其优点
面试 概念：加载类的时候先交给自己的父类加载器执行，直到顶层的启动类加载器，如果父加载器能够完成加载，则交给父类加载器，否则自己尝试加载。 优点：保证类的加载的安全性，避免类的重复加载。...
SVM支持向量机核函数选择避坑指南：从线性到RBF，如何根据你的数据特征做决定？
SVM核函数选择实战指南：从数据特征到模型调优的全流程解析 第一次在Scikit-learn中调用SVC类时，面对kernel参数下拉菜单里linear、poly、rbf、sigmoid四个选项，我盯着屏幕发了五分钟呆——这感觉就像走进一家高级餐厅，服务员递来一…...
Linux下RTL8188无线网卡变身AP热点：从驱动安装到自动分配IP全流程（附避坑指南）
Linux下RTL8188无线网卡配置AP热点全攻略：从驱动到自动IP分配的实战指南 在嵌入式开发和物联网应用中，将无线网卡配置为接入点（AP）是常见需求。RTL8188系列USB无线网卡因其高性价比和广泛兼容性，成为开发者的热门选择。…...
如何用掩码生成蒸馏（MGD）提升小模型性能？实战ResNet-18到ImageNet分类
掩码生成蒸馏实战：如何让ResNet-18在ImageNet上提升1.8%准确率 在模型轻量化的浪潮中，知识蒸馏技术正经历着从简单模仿到特征重构的范式转变。当我们用ResNet-50这样的"大模型"指导ResNet-18等"小模型"训练时，传统方法往…...
OpenClaw+ollama-QwQ-32B实战：自动化处理100份简历筛选
OpenClawollama-QwQ-32B实战：自动化处理100份简历筛选 1. 为什么选择自动化简历筛选 去年团队扩张时，我作为技术负责人参与了简历初筛工作。面对雪片般飞来的PDF简历，连续三天熬夜到凌晨两点手动整理关键信息后，我意识到必须寻找…...