鼠标悬停后出现小提示框实现方法
大家在网页上会经常看到某些图标或文字，当鼠标悬停后会在四周某个位置出现一个简短的文字提示，这种提示分为两种，一种是提示固定的文字，例如放在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–代表…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
Python如何给视频添加音频和字幕
在Python中，给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加，包括必要的代码示例和详细解释。 环境准备 在开始之前，需要安装以下Python库：…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的
修改bug思路： 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑：async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时，性能会显著下降。以下是优化思路和简易实现方法： 一、核心优化思路 减少 JOIN 数量 数据冗余：添加必要的冗余字段（如订单表直接存储用户名）合并表：将频繁关联的小表合并成…...
多模态图像修复系统：基于深度学习的图片修复实现
多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...
初探用uniapp写微信小程序遇到的问题及解决(vue3+ts)
零、关于开发思路 （一）拿到工作任务，先理清楚需求 1.逻辑部分 不放过原型里说的每一句话，有疑惑的部分该问产品/测试/之前的开发就问 2.页面部分（含国际化） 整体看过需要开发页面的原型后，分类一下哪些组件/样式可以复用，直接提取出来使用 (时间充分的前提下，不…...