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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/69762.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

网络工程师 （34）生成树协议

网络工程师 （34）生成树协议

前言 生成树协议&#xff08;Spanning Tree Protocol&#xff0c;STP&#xff09;是一种工作在OSI网络模型中第二层&#xff08;数据链路层&#xff09;的通信协议&#xff0c;其基本应用是防止交换机冗余链路产生的环路&#xff0c;确保以太网中无环路的逻辑拓扑结构&#xff…
阅读更多...
基于CanMV IDE 开发软件对K210图像识别模块的开发

基于CanMV IDE 开发软件对K210图像识别模块的开发

简介 CanMV IDE 是一款专为 K210 芯片设计的图形识别 Python 软件&#xff0c;它提供了强大的功能&#xff0c;帮助开发者轻松实现基于 K210 芯片的图形识别应用。无论你是初学者还是经验丰富的开发者&#xff0c;CanMV IDE 都能为你提供便捷的开发环境和丰富的资源。 硬件资…
阅读更多...
linux的三剑客和进程处理

linux的三剑客和进程处理

Linux三剑客&#xff1a; grep&#xff1a;查找 sed&#xff1a;编辑 awk&#xff1a;分析 grep - 正则表达式 [rootlocalhost ~]# grep ^a hello.txt abc grep - 忽略大小写&#xff0c;还有一些场景需要查询出来对应字符串所在的行号&#xff0c;方便我们快速在文件中定位字…
阅读更多...
Python虚拟环境管理工具 pyenv

Python虚拟环境管理工具 pyenv

情景 我现在在部署一个python 项目&#xff0c;需要用到Python 3.10。但是我本地已经有了一个3.12解释器&#xff0c;有没有一种方法&#xff0c;可以管理python 环境&#xff0c;还可以随意切换。怎么做&#xff1f; window 安装pyenv-win 使用 PowerShell&#xff08;以管…
阅读更多...
基于 PyTorch 的树叶分类任务：从数据准备到模型训练与测试

基于 PyTorch 的树叶分类任务：从数据准备到模型训练与测试

基于 PyTorch 的树叶分类任务&#xff1a;从数据准备到模型训练与测试 1. 引言 在计算机视觉领域&#xff0c;图像分类是一个经典的任务。本文将详细介绍如何使用 PyTorch 实现一个树叶分类任务。我们将从数据准备开始&#xff0c;逐步构建模型、训练模型&#xff0c;并在测试…
阅读更多...
北斗导航 | 基于多假设解分离（MHSS）模型的双星故障监测算法（MATLAB代码实现——ARAIM）

北斗导航 | 基于多假设解分离（MHSS）模型的双星故障监测算法（MATLAB代码实现——ARAIM）

===================================================== github：https://github.com/MichaelBeechan CSDN：https://blog.csdn.net/u011344545 ===================================================== 双星故障监测算法 一、多星故障MHSS模型流程1、数据预处理2、构建假设模…
阅读更多...
pytest测试专题 - 1.2 如何获得美观的测试报告

pytest测试专题 - 1.2 如何获得美观的测试报告

<< 返回目录 1 pytest测试专题 - 1.2 如何获得美观的测试报告 1.1 背景 虽然pytest命令的报文很详细&#xff0c;用例在执行调试时还算比较方便阅读和提取失败信息&#xff0c; 但对于大量测试用例运行时&#xff0c;可能会存在以下不足 报文被冲掉测试日志没法归档 …
阅读更多...
压缩stl文件大小

压缩stl文件大小

1、MeshLab下载界面&#xff0c;从MeshLab下载适合自己系统的最新版本。 2、打开 MeshLab软件&#xff0c;将stl文件拖入其中。 3、 4、Percentage reduction参数即为缩放比例&#xff0c;根据自身想要将文件压缩到多大来。 然后点击apply 5、CtrlE弹出窗口保存文件后&…
阅读更多...
FPGA 28 ，基于 Vivado Verilog 的呼吸灯效果设计与实现（ 使用 Vivado Verilog 实现呼吸灯效果 ）

FPGA 28 ，基于 Vivado Verilog 的呼吸灯效果设计与实现（ 使用 Vivado Verilog 实现呼吸灯效果 ）

目录 前言 一. 设计流程 1.1 需求分析 1.2 方案设计 1.3 PWM解析 二. 实现流程 2.1 确定时间单位和精度 2.2 定义参数和寄存器 2.3 实现计数器逻辑 2.4 控制 LED 状态 三. 整体流程 3.1 全部代码 3.2 代码逻辑 1. 参数定义 2. 分级计数 3. 状态切换 4. LED 输…
阅读更多...
百度舆情优化：百度下拉框中的负面如何清除？

百度舆情优化：百度下拉框中的负面如何清除？

百度的下拉词、相关搜索、大家还在搜有负面词条&#xff0c;一直是企业公关经理头疼的问题&#xff0c;小马识途营销顾问深耕网络营销领域十几年&#xff0c;对百度SEO优化、百度下拉框、百度相关搜索、自媒体营销、短视频营销等等技巧方面积累了一定的方法和技巧。 对于百度下…
阅读更多...
【云安全】云原生-K8S- API Server 未授权访问

【云安全】云原生-K8S- API Server 未授权访问

API Server 是 Kubernetes 集群的核心管理接口&#xff0c;所有资源请求和操作都通过 kube-apiserver 提供的 API 进行处理。默认情况下&#xff0c;API Server 会监听两个端口&#xff1a;8080 和 6443。如果配置不当&#xff0c;可能会导致未授权访问的安全风险。 8080 端口…
阅读更多...
大模型Agent开发框架概览

大模型Agent开发框架概览

一、低代码框架 无需代码即可完成Agent开发热门框架&#xff1a;Coze、Dify、langFlow 二、基础框架 借助大模型原生能力进行Agent开发function calling、tools use 三、代码框架 借助代码完成Agent开发热门框架&#xff1a;LangChain、LangGraph、LIamaIndex 四、Multi-…
阅读更多...
对前端的技术进行分层

对前端的技术进行分层

前端相比较后端而言&#xff0c;由于其发展历史和浏览器的标准不一&#xff0c;导致其看上去简单&#xff0c;但是深入起来又很复杂&#xff0c;在最开始学习的时候&#xff0c;我们往往是了解一下三剑客和vue、react的api就开始上手工作了&#xff0c;但是到后面会发现&#x…
阅读更多...
DeepSeek的大模型介绍

DeepSeek的大模型介绍

文章目录 DeepSeek是什么DeepSeek平台使用DeepSeek的使用场景DeepSeek的本地部署 DeepSeek是什么 DeepSeek是一家2023/7月年成立的人工智能公司&#xff0c;致力于开发高效、高性能的生成式AI模型&#xff0c;在短短一年多的时间里推出了多款强大的开源模型&#xff0c;包括De…
阅读更多...
yolov8涨点系列之多头自注意力引入与FasterNet融合生成新模块

yolov8涨点系列之多头自注意力引入与FasterNet融合生成新模块

文章目录 多头自注意力介绍原理特点yolov8增加MultiHeadSelfAttention具体步骤融合新模块代码(1)在_init_.py+__conv.py文件的__all__内添加‘MultiHeadSelfAttention’(2)conv.py文件复制粘贴新模块代码MultiHeadSelfAttentionFasterNetBlockFasterNetBlockWithSelfAttention代…
阅读更多...
问卷数据分析|SPSS实操之单因素方差分析

问卷数据分析|SPSS实操之单因素方差分析

适用条件&#xff1a; 检验分类变量和定量变量之间的差异 分类变量数量要大于等于三 具体操作&#xff1a; 1.选择分析--比较平均值--单因素ANOVA检验 2. 下方填分类变量&#xff0c;上方为各个量表数据Z1-Y2 3. 点击选项&#xff0c;选择描述和方差齐性检验 4.此处为结果数…
阅读更多...
全排列II(力扣47)

全排列II(力扣47)

这道题与全排列(力扣46)-CSDN博客 的不同就在于集合中有相同元素&#xff0c;我们唯一多的操作就是在同一层递归中也要去重&#xff0c;其他的都与上一题相同。大家可以结合我下面的代码及详细注释理解此题。 代码及详细注释如下&#xff1a; class Solution { public:vector…
阅读更多...
信息收集-主机服务器系统识别IP资产反查技术端口扫描协议探针角色定性

信息收集-主机服务器系统识别IP资产反查技术端口扫描协议探针角色定性

知识点&#xff1a; 1、信息收集-服务器系统-操作系统&IP资产 2、信息收集-服务器系统-端口扫描&服务定性 一、演示案例-应用服务器-操作系统&IP资产 操作系统 1、Web大小写(windows不区分大小写&#xff0c;linux区分大小写) 2、端口服务特征(22就是linux上的服…
阅读更多...
vmware安装win7

vmware安装win7

1、版本说明 vmware workstation 16 win7 X64 2、安装步骤 安装步骤有点独特&#xff0c;先配置虚拟机&#xff0c;然后再虚拟机的虚拟光驱里添加下载的win7。 配置完了之后&#xff0c;点击要运行的虚拟机&#xff0c;然后一直往下走就可以完成系统的安装。 3、配置系统以解…
阅读更多...
【C++学习笔记】if 和 if constexpr

【C++学习笔记】if 和 if constexpr

背景 在工作中&#xff0c;在一个模版函数里&#xff0c;需要判断 if (std::is_same<T, float>) 来选择走哪个分支&#xff0c;分支里的函数是只能处理相应的类型的&#xff0c;编译过程中产生了报错。 解释 if (std::is_same<T, float>::value)和if constexpr …
阅读更多...
最新文章

Copyright @ 2022~2023