CSS 小技巧 —— CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层
CSS 小技巧 —— CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层
1. 两个元素实现
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>纯 CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层</title><style>*{padding: 0;margin: 0;list-style: none;}.item {position: relative;display: inline-block;margin: 10px;}.name {cursor: pointer;padding: 5px;}.desc {display: none;position: absolute;top: 130%;left: 50%;transform: translateX(-50%) translateY(-10px);background-color: rgba(0, 0, 0, 0.8);color: #fff;padding: 5px 10px;border-radius: 4px;white-space: nowrap;z-index: 100;opacity: 0;transition: opacity 0.3s ease, transform 0.3s ease;}.desc::before {content: '';position: absolute;top: -10px;left: 50%;transform: translateX(-50%);border-width: 5px;border-style: solid;border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;}.item:hover .desc {display: block;opacity: 1;transform: translateX(-50%) translateY(0);}</style>
</head>
<body><ul class="item-list"><li class="item"><span class="name">a</span><span class="desc">aa</span></li><li class="item"><span class="name">b</span><span class="desc">bb</span></li><li class="item"><span class="name">c</span><span class="desc">ccdddd</span></li></ul>
</body>
</html>
2. 通过 ::after 和 ::before 实现
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>纯 CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层</title><style>*{padding: 0;margin: 0;list-style: none;}.item-list {display: flex;gap: 20px;}.item {position: relative;}.name {position: relative;cursor: pointer;padding: 5px;}.name::after {content: attr(data-desc);display: none;position: absolute;top: 100%;left: 50%;transform: translateX(-50%) translateY(5px);background-color: rgba(0, 0, 0, 0.8);color: #fff;padding: 5px 10px;border-radius: 4px;white-space: nowrap;z-index: 100;opacity: 0;transition: opacity 0.3s ease, transform 0.3s ease;}.name:hover::after {display: block;opacity: 1;transform: translateX(-50%) translateY(0);}.name::before {content: '';display: none;position: absolute;top: calc(100% - 5px);left: 50%;transform: translateX(-50%) translateY(-5px);border-width: 5px;border-style: solid;border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;}.name:hover::before {display: block;}</style>
</head>
<body><ul class="item-list"><li class="item"><span class="name" data-desc="aa">a</span></li><li class="item"><span class="name" data-desc="bb">b</span></li><li class="item"><span class="name" data-desc="ccddddd">c</span></li></ul>
</body>
</html>
3. 实现 Tooltip 上下左右四个位置展示
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>纯 CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层</title><style>.tooltip-container {position: relative;display: inline-block;margin: 100px;border-bottom: 1px dotted black;cursor: pointer;}.tooltip-container::after {content: attr(data-tooltip);position: absolute;z-index: 1;opacity: 0;visibility: hidden;transition: opacity 0.3s;background: #333;color: white;padding: 5px 10px;border-radius: 4px;font-size: 14px;white-space: nowrap;}.tooltip-container::before {content: '';position: absolute;z-index: 1;border: 5px solid transparent;opacity: 0;visibility: hidden;transition: opacity 0.3s;}.tooltip-container:hover::after,.tooltip-container:hover::before {opacity: 1;visibility: visible;}.tooltip-top::after {bottom: 100%;left: 50%;transform: translateX(-50%);margin-bottom: 10px;}.tooltip-top::before {bottom: calc(100% - 5px);left: 50%;transform: translateX(-50%);margin-bottom: 5px;border-top-color: #333; /* 箭头方向 */}.tooltip-bottom::after {top: 100%;left: 50%;transform: translateX(-50%);margin-top: 10px;}.tooltip-bottom::before {top: calc(100% - 5px);left: 50%;transform: translateX(-50%);margin-top: 5px;border-bottom-color: #333;}.tooltip-right::after {top: 50%;left: 100%;transform: translateY(-50%);margin-left: 10px;}.tooltip-right::before {top: 50%;left: calc(100% - 5px);transform: translateY(-50%);margin-left: 5px;border-right-color: #333;}.tooltip-left::after {top: 50%;right: 100%;transform: translateY(-50%);margin-right: 10px;}.tooltip-left::before {top: 50%;right: calc(100% - 5px);transform: translateY(-50%);margin-right: 5px;border-left-color: #333;}</style>
</head>
<body><div class="tooltip-container tooltip-top" data-tooltip="Top Tooltip">顶部显示
</div><div class="tooltip-container tooltip-bottom" data-tooltip="Bottom Tooltip">下方显示
</div><div class="tooltip-container tooltip-left" data-tooltip="Left Tooltip">左侧显示
</div><div class="tooltip-container tooltip-right" data-tooltip="Right Tooltip">右侧显示
</div></body>
</html>
相关文章：
CSS 小技巧 —— CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层
CSS 小技巧 —— CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层 1. 两个元素实现 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>纯 CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层</titl…...
19.4.2 -19.4.4 新增、修改、删除数据
版权声明：本文为博主原创文章，转载请在显著位置标明本文出处以及作者网名，未经作者允许不得用于商业目的。 需要北风数据库的请留言自己的信箱。 19.4.2 新增数据 数据库数据的新增、修改和删除不同于查询，查询需要返回一个DbD…...
【PL/SQL】常用操作复习20250212
目录标题 1.基本语法结构二级目录三级目录 1.基本语法结构2。变量声明和使用3. SELECT 查询4.插入 insert5.更新UPDATE6.删除(DELETE) 7游标 cursor例子1：基本游标使用例子2：使用FOR循环的简化写法实际应用例子：给高工资员工增加奖金 8 IF 条…...
C++自研游戏引擎-碰撞检测组件-八叉树AABB检测算法实现
八叉树碰撞检测是一种在三维空间中高效处理物体碰撞检测的算法，其原理可以类比为一个管理三维空间物体的智能系统。这个示例包含两个部分：八叉树部分用于宏观检测，AABB用于微观检测。AABB可以更换为均值或节点检测来提高检测精度。 八叉树的…...
haproxy详解笔记
一、概述 HAProxy（High Availability Proxy）是一款开源的高性能 TCP/HTTP 负载均衡器和代理服务器，用于将大量并发连接分发到多个服务器上，从而提高系统的可用性和负载能力。它支持多种负载均衡算法，能够根据服务器的…...
windows 通过docker 安装mysql
参考：Docker安装并使用Mysql（可用详细）_docker 安装mysql-CSDN博客 1. 拉取镜像：docker pull mysql:5.7 2. 查看镜像：docker image 3. 创建mysql 容器实例，并将data 目录挂载到本地d盘上 docker run --n…...
【STM32】通过L496的HAL库Flash建立FatFS文件系统（CubeMX自动配置R0.12C版本）
【STM32】通过L496的HAL库Flash建立FatFS文件系统（CubeMX自动配置R0.12C版本） 文章目录 FlashFlash地址写Flash地址读 FatFS文件系统配置FatFS移植驱动函数时间戳函数 文件操作函数工作区缓存文件挂载和格式化测试文件读写测试其他文件操作函数 测试附录…...
QTreeView笔记
1.定义TreeModel类 我们需要继承自QAbstractItemModel，让我们来看看它有哪些接口。 QAbstractItemModel类中定义如下： Q_INVOKABLE virtual QModelIndex index(int row, int column, const QModelIndex &parent QModelIndex()) const 0;Q_INVOK…...
传感器篇（一）——深度相机
目录 一 概要 二 原理 三 对比 四 产品 五 结论 一 概要 深度相机是一种能够获取物体深度信息的设备，相较于普通相机只能记录物体的二维图像信息，深度相机可以感知物体与相机之间的距离，从而提供三维空间信息。在你正在阅读的报告中提到…...
Qt 控件整理 —— 按钮类
一、PushButton 1. 介绍 在Qt中最常见的就是按钮，它的继承关系如下： 2. 常用属性 3. 例子 我们之前写过一个例子，根据上下左右的按钮去操控一个按钮，当时只是做了一些比较粗糙的去演示信号和槽是这么连接的，这次我们…...
校园网绕过认证上网很简单
校园网绕过认证就是不用通过校园WiFi的WEB页面登录，这个WEB登录页面就是认证页面. 所谓绕过认证，就是不通过校园WiFi WEB登录页面直接上网，校园WiFi没有密码，直接就能连接上，我们连上这个WiFi的时候，它会给…...
蓝桥杯篇---温度传感器 DS18B20
文章目录 前言DS18B201. DS18B20 引脚说明2. 单总线通信协议3. DS18B20 操作流程初始化写操作读操作 4. 示例代码5. 代码说明6. 注意事项总结 前言 以上就是今天要讲的内容，本文简单介绍了IAP15F2K61S2中温度传感器模块DS18B20的使用。 DS18B20 DS18B20 是一款数字…...
WPS或word接入智能AI
DeepSeek接入WPS 配置WPS （1）下载 OfficeAl助手插件: 插件下载地址:https://www.office-ai.cn/。 安装插件后，打开WPS，菜单栏会新增"OfficeAl助手”选项卡。 如果没有出现， 左上找到文件菜单 -> 选项 ,在…...
vue3:template中v-for循环遍历这个centrerTopdata，我希望自循环前面三个就可以了怎么写？
问： template中v-for循环遍历这个centrerTopdata，我希望自循环前面三个就可以了怎么写？ 回答： 问： <div v-for"(item, index) in centrerTopdata.slice(0, 3)" :key"index"> div cl…...
Java练习（20）
ps:练习来自力扣 给你一个 非空 整数数组 nums ，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法来解决此问题，且该算法只使用常量额外空间。 class Solution {pu…...
MySQL | MySQL安装教程
MySQL | MySQL安装教程(压缩包（ZIP）安装-详细版) 🪄个人博客：https://vite.xingji.fun MySQL概述 MySQL是一个关系型数据库管理系统，由瑞典MySQL AB公司开发，MySQL AB公司被Sun公司收购，Sun公…...
.NET 9.0 的 Blazor Web App 项目，进度条 ＜progress＞ 组件使用注意事项
一、执行过程中，要刷新 进度条 的显示，需要 延时、释放，否则进度条不 实时 更新，最后一下到 100% // 延时，释放给前端：【必须】，否则进度条不 实时 更新，最后一下到 100await Task.D…...
李超线段树 树链剖分 学习笔记
今天学习了李超线段树。 [洛谷 P4097] 【模板】李超线段树 & [HEOI2013] Segment 刚开始学李超线段树，觉得挺简单的。其实它跟吉司机线段树有点像，只是维护的东西要少一些，并且代码更好写。 对于每个节点，考虑维护在它中点处的…...
【SpringBoot3.x+】slf4j-log4j12依赖引入打印日志报错的两种解决方法
最开始引入了1.7.5版本的slf4j-log4j依赖包，但是控制台不报错也不显示日志 在https://mvnrepository.com/找到最新的2.0.16版本之后出现报错： 进入提示的slf4j网站中可以找到从2.0.0版本开始，slf4j-log4j已经被slf4j-reload4j取代࿱…...
安装 Ollama 需要哪些步骤？（windows+mac+linux+二进制+Docker）
安装 Ollama 的步骤根据操作系统不同会有所差异，以下是针对不同操作系统的详细安装指南： Windows 系统 下载安装包：访问 Ollama 官方下载页面，下载适用于 Windows 的安装程序 OllamaSetup.exe。运行安装程序：双击下载的安装包，按照提示完成安装。默认安装路径为 C:\User…...
算法学习笔记之贪心算法
导引（硕鼠的交易） 硕鼠准备了M磅猫粮与看守仓库的猫交易奶酪。 仓库有N个房间，第i个房间有 J[i] 磅奶酪并需要 F[i] 磅猫粮交换，硕鼠可以按比例来交换，不必交换所有的奶酪 计算硕鼠最多能得到多少磅奶酪。 输入M和…...
探索DeepSeek：开源大模型领域的中国力量
在人工智能技术迅猛发展的今天，大语言模型（LLM）已成为全球科技竞争的焦点。来自中国的深度求索（DeepSeek）团队凭借其开源模型系列，正在为这一领域注入新的活力。本文将带您了解DeepSeek的技术突破、开源生态…...
372_C++_当有多个通道，开启不同告警的同一种的开关时，限制该开关的打开数量（比如视频上传开关）
GetCloudUploadNum函数 GetCloudUploadNum 函数主要用于统计和控制云端视频上传的通道数量,其主要功能如下: 功能目的// 检查每个通道的云端视频上传配置,并统计启用云端上传的通道总数 int CloudUploadNum = 0; bool InValidCloudUploadChn[MAX_CHN_NUMPARA] = {};...
【视频总结】Deep Dive into LLMs like ChatGPT 深入探索像ChatGPT这样的大语言模型｜Andrej Karpathy
【视频总结】Deep Dive into LLMs like ChatGPT 深入探索像ChatGPT这样的大语言模型｜Andrej Karpathy 大型语言模型（LLM）工作原理与使用指南核心观点模型训练三阶段1. 预训练阶段2. 后训练阶段（Post-training）3. 强化学…...
SQL自学，mysql从入门到精通 --- 第 5 天，对函数的处理
对函数的处理 新建一个成绩表 rootmysqldb 09:39: [d1]> create table score (-> name varchar(30),-> chinese int,-> math int,-> music int,-> team int,-> magic int,-> computer int-> ); Query OK, 0 rows affected (0.01 sec)rootmysqldb…...
DeepSeek R1 “顿悟时刻”(Aha Moment) 的重现与探索：基于 GRPO 的倒计时游戏训练
本文翻译整合转载于： Deepseek R1 是如何训练的Mini-R1：重现 Deepseek R1 的 “顿悟时刻” RL 教程 Deepseek R1 的发布震惊了整个行业。为什么？DeepSeek-R1 是一个开放模型，在复杂推理任务中可与 OpenAI 的 o1 相媲美，…...
【JavaScript爬虫记录】记录一下使用JavaScript爬取m4s流视频过程(内含ffmpeg合并)
前言 前段时间发现了一个很喜欢的视频,可惜网站不让下载,简单看了一下视频是被切片成m4s格式的流文件,初步想法是将所有的流文件下载下来然后使用ffmpeg合并成一个完整的mp4,于是写了一段脚本来实现一下,电脑没有配python环境,所以使用JavaScript实现,合并功能需要安装ffmpeg,…...
【线性代数】1行列式
1. 行列式的概念 行列式的符号表示： 行列式的计算结果：一个数 计算模型1：二阶行列式 二阶行列式： 三阶行列式： n阶行列式： 🍎计算行列式 计算模型2：上三角形行列式 上三角形行列式特征：主对角线下皆为0。 上三角形行列式： 化上三角形通用方法：主对角线下，…...
数据结构（考研）
线性表 顺序表 顺序表的静态分配 //线性表的元素类型为 ElemType//顺序表的静态分配 #define MaxSize10 typedef int ElemType; typedef struct{ElemType data[MaxSize];int length; }SqList;顺序表的动态分配 //顺序表的动态分配 #define InitSize 10 typedef struct{El…...
安装WPS后，导致python调用Excel.Application异常，解决办法
在使用xlwings编辑excel文件时，默认调用的是“Excel.Application”，如果安装过wps，会导致该注册表为WPS，会导致xlwings执行异常 因为安装过WPS，导致与Excel不兼容的问题，想必大家都听说过。有些问题及时删…...