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;并在测试…
阅读更多...
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 输…
阅读更多...
【云安全】云原生-K8S- API Server 未授权访问

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

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

DeepSeek的大模型介绍

文章目录 DeepSeek是什么DeepSeek平台使用DeepSeek的使用场景DeepSeek的本地部署 DeepSeek是什么 DeepSeek是一家2023/7月年成立的人工智能公司&#xff0c;致力于开发高效、高性能的生成式AI模型&#xff0c;在短短一年多的时间里推出了多款强大的开源模型&#xff0c;包括De…
阅读更多...
问卷数据分析|SPSS实操之单因素方差分析

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

适用条件&#xff1a; 检验分类变量和定量变量之间的差异 分类变量数量要大于等于三 具体操作&#xff1a; 1.选择分析--比较平均值--单因素ANOVA检验 2. 下方填分类变量&#xff0c;上方为各个量表数据Z1-Y2 3. 点击选项&#xff0c;选择描述和方差齐性检验 4.此处为结果数…
阅读更多...
信息收集-主机服务器系统识别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、配置系统以解…
阅读更多...
【ThreeJS Basics 1-3】Hello ThreeJS，实现第一个场景

【ThreeJS Basics 1-3】Hello ThreeJS，实现第一个场景

文章目录 环境创建一个项目安装依赖基础 Web 页面概念解释编写代码运行项目 环境 我的环境是 node version 22 创建一个项目 首先&#xff0c;新建一个空的文件夹&#xff0c;然后 npm init -y , 此时会快速生成好默认的 package.json 安装依赖 在新建的项目下用 npm 安装依…
阅读更多...
Linux下的进程切换与调度

Linux下的进程切换与调度

目录 1.进程的优先级 优先级是什么 Linux下优先级的具体做法 优先级的调整为什么要受限 2.Linux下的进程切换 3.Linux下进程的调度 1.进程的优先级 我们在使用计算机的时候&#xff0c;通常会启动多个程序&#xff0c;这些程序最后都会变成进程&#xff0c;但是我们的硬…
阅读更多...
使用 EMQX 接入 LwM2M 协议设备

使用 EMQX 接入 LwM2M 协议设备

LwM2M 协议介绍 LwM2M 是一种轻量级的物联网设备管理协议&#xff0c;由 OMA&#xff08;Open Mobile Alliance&#xff09;组织制定。它基于 CoAP &#xff08;Constrained Application Protocol&#xff09;协议&#xff0c;专门针对资源受限的物联网设备设计&#xff0c;例…
阅读更多...
【Java 面试 八股文】Redis篇

【Java 面试 八股文】Redis篇

Redis 1. 什么是缓存穿透&#xff1f;怎么解决&#xff1f;2. 你能介绍一下布隆过滤器吗&#xff1f;3. 什么是缓存击穿&#xff1f;怎么解决&#xff1f;4. 什么是缓存雪崩&#xff1f;怎么解决&#xff1f;5. redis做为缓存&#xff0c;mysql的数据如何与redis进行同步呢&…
阅读更多...
第二天：工具的使用

第二天：工具的使用

每天上午9点左右更新一到两篇文章到专栏《Python爬虫训练营》中&#xff0c;对于爬虫有兴趣的伙伴可以订阅专栏一起学习&#xff0c;完全免费。 键盘为桨&#xff0c;代码作帆。这趟为期30天左右的Python爬虫特训即将启航&#xff0c;每日解锁新海域&#xff1a;从Requests库的…
阅读更多...
MySQL8.0 innodb Cluster 高可用集群部署（MySQL、MySQL Shell、MySQL Router安装）

MySQL8.0 innodb Cluster 高可用集群部署（MySQL、MySQL Shell、MySQL Router安装）

简介 MySQL InnoDB集群&#xff08;Cluster&#xff09;提供了一个集成的&#xff0c;本地的&#xff0c;HA解决方案。Mysq Innodb Cluster是利用组复制的 pxos 协议&#xff0c;保障数据一致性&#xff0c;组复制支持单主模式和多主模式。 InnoDB Cluster组件&#xff1a; …
阅读更多...
Unity-Mirror网络框架-从入门到精通之LagCompensation示例

Unity-Mirror网络框架-从入门到精通之LagCompensation示例

文章目录 前言什么是滞后补偿Lag Compensation示例延迟补偿原理ServerCubeClientCubeCapture2DSnapshot3D补充LagCompensation.cs 独立算法滞后补偿器组件注意：算法最小示例前言 在现代游戏开发中，网络功能日益成为提升游戏体验的关键组成部分。本系列文章将为读者提供对Mir…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023