鼠标悬停后出现小提示框实现方法
大家在网页上会经常看到某些图标或文字，当鼠标悬停后会在四周某个位置出现一个简短的文字提示，这种提示分为两种，一种是提示固定的文字，例如放在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–代表…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 （1）使用React Native…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成，核心是利用 HTTP 协议的 Range 请求头指定下载范围： 实现原理 Range 请求头：向服务器请求文件的特定字节范围（如 Range: bytes1024-） 本地文件记录：保存已…...
高等数学（下）题型笔记（八）空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
Python如何给视频添加音频和字幕
在Python中，给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加，包括必要的代码示例和详细解释。 环境准备 在开始之前，需要安装以下Python库：…...
CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN，根据VPN原理，打通两个内网必然需要借助一个公共中继节点，ktconnect工具巧妙的利用k8s原生的portforward能力，简化了建立连接的过程，apiserver间接起到了中继节…...
AI，如何重构理解、匹配与决策？
AI 时代，我们如何理解消费？ 作者｜王彬 封面｜Unplash 人们通过信息理解世界。 曾几何时，PC 与移动互联网重塑了人们的购物路径：信息变得唾手可得，商品决策变得高度依赖内容。 但 AI 时代的来…...