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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【转载】开源鸿蒙OpenHarmony社区运营报告（2025年1月）

【转载】开源鸿蒙OpenHarmony社区运营报告（2025年1月）

●截至2025年1月31日&#xff0c;开放原子开源鸿蒙&#xff08;OpenAtom OpenHarmony&#xff0c;简称“开源鸿蒙”或“OpenHarmony”&#xff09;社区累计超过8200名贡献者&#xff0c;共63家成员单位&#xff0c;产生51.2万多个PR、2.9万多个Star、10.5万多个Fork、68个SIG。…
阅读更多...
03：Spring之Web

03：Spring之Web

一&#xff1a;Spring整合web环境 1&#xff1a;web的三大组件 Servlet&#xff1a;核心组件&#xff0c;负责处理请求和生成响应。 Filter&#xff1a;用于请求和响应的预处理和后处理&#xff0c;增强功能。 Listener&#xff1a;用于监听 Web 应用中的事件&#xff0c;实…
阅读更多...
ASP.NET Core 如何使用 C# 向端点发出 POST 请求

ASP.NET Core 如何使用 C# 向端点发出 POST 请求

使用 C#&#xff0c;将 JSON POST 到 REST API 端点&#xff1b;如何从 REST API 接收 JSON 数据。 本文需要 ASP .NET Core&#xff0c;并兼容 .NET Core 3.1、.NET 6和.NET 8。 要从端点获取数据&#xff0c;请参阅本文。 使用 . 将 JSON 数据发布到端点非常容易HttpClien…
阅读更多...
大语言模型需要的可观测性数据的关联方式

大语言模型需要的可观测性数据的关联方式

可观测性数据的关联方式及其优缺点 随着现代分布式架构和微服务的普及&#xff0c;可观测性&#xff08;Observability&#xff09;已经成为确保系统健康、排查故障、优化性能的重要组成部分。有效的可观测性数据关联方式不仅能够帮助我们实时监控系统的运行状态&#xff0c;还…
阅读更多...
渗透利器：Burp Suite 联动 XRAY 图形化工具.（主动扫描+被动扫描）

渗透利器：Burp Suite 联动 XRAY 图形化工具.（主动扫描+被动扫描）

Burp Suite 联动 XRAY 图形化工具.&#xff08;主动扫描被动扫描&#xff09; Burp Suite 和 Xray 联合使用&#xff0c;能够将 Burp 的强大流量拦截与修改功能&#xff0c;与 Xray 的高效漏洞检测能力相结合&#xff0c;实现更全面、高效的网络安全测试&#xff0c;同时提升漏…
阅读更多...
C语言_通讯录

C语言_通讯录

“我若成佛&#xff0c;天下无魔&#xff1b;我若成魔&#xff0c;佛奈我何。” “小爷是魔&#xff0c;那又如何&#xff1f;” 下面我和一起来攻克通讯录的难关&#xff01;&#xff01; 明确通讯录的基本结构 实现一个通讯录: 人的信息: 名字年龄性别电话地址 实现通讯录的…
阅读更多...
STM32 Flash详解教程文章

STM32 Flash详解教程文章

目录 Flash基本概念理解 Flash编程接口FPEC Flash擦除/写入流程图 Flash选项字节基本概念理解 Flash电子签名 函数读取地址下存放的数据 Flash的数据处理限制部分 编写不易&#xff0c;请勿搬运&#xff0c;感谢理解&#xff01;&#xff01;&#xff01; Flash基本概念…
阅读更多...
Flutter项目试水

Flutter项目试水

1基本介绍 本文章在构建您的第一个 Flutter 应用指导下进行实践 可作为项目实践的辅助参考资料 Flutter 是 Google 的界面工具包&#xff0c;用于通过单一代码库针对移动设备、Web 和桌面设备构建应用。在此 Codelab 中&#xff0c;您将构建以下 Flutter 应用。 该应用可以…
阅读更多...
第六篇：数字逻辑的“矩阵革命”——域控制器中的组合电路设计

第六篇：数字逻辑的“矩阵革命”——域控制器中的组合电路设计

副标题 &#xff1a;用卡诺图破解车身域控制器的逻辑迷宫&#xff0c;揭秘华为DriveONE的“数字特工” ▍ 开篇&#xff1a;黑客帝国世界观映射 > "Welcome to the Real World." —— Morpheus > 在数字逻辑的世界里&#xff0c;组合电路就是构建Matr…
阅读更多...
成为高能量体质：从身体神庙到精神圣殿的修炼之路

成为高能量体质：从身体神庙到精神圣殿的修炼之路

清晨五点&#xff0c;当城市还在沉睡&#xff0c;瑜伽垫上的汗水已经折射出第一缕阳光。这不是苦行僧的自虐&#xff0c;而是高能量体质者的日常仪式。在这个能量稀缺的时代&#xff0c;如何把自己修炼成一座小型核电站&#xff1f;答案就藏在身体的每个细胞里。 一、能量管理…
阅读更多...
从大规模恶意攻击 DeepSeek 事件看 AI 创新隐忧：安全可观测体系建设刻不容缓

从大规模恶意攻击 DeepSeek 事件看 AI 创新隐忧：安全可观测体系建设刻不容缓

作者&#xff1a;羿莉&#xff08;萧羿&#xff09; 全球出圈的中国大模型 DeepSeek 作为一款革命性的大型语言模型&#xff0c;以其卓越的自然语言处理能力和创新性成本控制引领行业前沿。该模型不仅在性能上媲美 OpenAI-o1&#xff0c;而且在推理模型的成本优化上实现了突破…
阅读更多...
低成本+高性能+超灵活！Deepseek 671B+Milvus重新定义知识库搭建

低成本+高性能+超灵活！Deepseek 671B+Milvus重新定义知识库搭建

“老板说&#xff0c;这个项目得上Deepseek,还得再做个知识库...” 还有哪个开发者&#xff0c;最近没听到这样的抱怨&#xff1f; Deepseek爆火&#xff0c;推理端的智能提速&#xff0c;算力成本急剧下降&#xff0c;让不少原本不想用大模型&#xff0c;用不起大模型的企业&a…
阅读更多...
CSS 实现下拉菜单效果实例解析

CSS 实现下拉菜单效果实例解析

1. 引言 在 Web 开发过程中&#xff0c;下拉菜单是一种常见且十分实用的交互组件。很多前端教程都提供过简单的下拉菜单示例&#xff0c;本文将以一个简洁的实例为出发点&#xff0c;从 HTML 结构、CSS 样式以及整体交互逻辑三个层面进行详细解析&#xff0c;帮助大家理解纯 C…
阅读更多...
VSCode中出现“#include错误，请更新includePath“问题，解决方法

VSCode中出现“#include错误，请更新includePath“问题，解决方法

1、出现的问题 在编写C程序时&#xff0c;想引用头文件但是出现如下提示&#xff1a; &#xff08;1&#xff09;首先检查要引用的头文件是否存在&#xff0c;位于哪里。 &#xff08;2&#xff09;如果头文件存在&#xff0c;在编译时提醒VSCode终端中"#include错误&am…
阅读更多...
【RabbitMQ的监听器容器Simple和Direct】 实现和场景区别

【RabbitMQ的监听器容器Simple和Direct】 实现和场景区别

在Spring Boot中&#xff0c;RabbitMQ的两种监听器容器&#xff08;SimpleMessageListenerContainer和DirectMessageListenerContainer&#xff09;在实现机制和使用场景上有显著差异。以下是它们的核心区别、配置方式及最佳实践&#xff1a; Simple类型 Direct类型 一、核心…
阅读更多...
yolo11自训练极简教程 - 训练侦测

yolo11自训练极简教程 - 训练侦测

去年我处理过的最后一个版本是yolov10.新年再次着手处理视频识别的工作。发现自清华的v10之后&#xff0c;去年下半年v11再次发布了。国内访问github有些问题&#xff0c;但是yolo网站是可以方便访问的&#xff1a; Train - Ultralytics YOLO Docs 国外的知识库做的很棒&…
阅读更多...
大数据学习之SparkStreaming、PB级百战出行网约车项目一

大数据学习之SparkStreaming、PB级百战出行网约车项目一

一.SparkStreaming 163.SparkStreaming概述 Spark Streaming is an extension of the core Spark API that enables scalable, high-throughput, fault-tolerant stream processing of live data streams. Spark Streaming 是核心 Spark API 的扩展&#xff0c;支持实时数据…
阅读更多...
day5QT套接字通信

day5QT套接字通信

Widget.cpp #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);objtimer new QTimer (this);//连接定时器的timeout信号到启动的槽函数//connect(objtimer,&…
阅读更多...
【免费】2007-2020年各省医疗卫生支出数据

【免费】2007-2020年各省医疗卫生支出数据

2007-2020年各省医疗卫生支出数据 1、时间&#xff1a;2007-2020年 2、来源&#xff1a;国家统计局、统计年鉴 3、指标&#xff1a;行政区划代码、地区名称、年份、医疗卫生支出 4、范围&#xff1a;31省 5、指标说明&#xff1a;地方财政医疗卫生支出是指地方ZF从其财政预…
阅读更多...
本地基于GGUF部署的DeepSeek实现轻量级调优之二：检索增强生成（RAG）

本地基于GGUF部署的DeepSeek实现轻量级调优之二：检索增强生成（RAG）

前文&#xff0c;我们在本地windows电脑基于GGUF文件&#xff0c;部署了DeepSeek R1 1.5B模型&#xff0c;如果想在离线模式下加载本地的DeepSeek模型自行对进行训练时&#xff0c;是不能直接使用GGUF文件进行训练的&#xff0c;但是可以对模型进行微调&#xff0c;以下说的是第…
阅读更多...
最新文章

Copyright @ 2022~2023