HTML气泡提示显示过渡效果的详细实现方法-html教程-PHP中文网

纯css气泡提示需用opacity+visibility组合过渡，禁用display；触发元素须设position:relative；移动端应改用:focus或js控制显隐。

html气泡提示显示过渡效果的详细实现方法

纯 CSS 气泡提示加过渡效果，关键不是写 transition 就完事——display: none 不能触发过渡，visibility 不配 opacity 会硬切，top/left 直接改值会导致位移抖动。必须用对组合、设对初始态、管住定位流。

为什么 transition: all 0.3s 不起作用

常见错误是给气泡元素写 transition: all 0.3s，然后靠 :hover .tooltip-bubble { display: block; } 控制显隐。但 display 是离散属性，浏览器不支持对其做插值动画，transition 会直接失效，气泡“啪”一下闪出来。

真正可过渡的显隐控制只有两组组合：

opacity: 0 → 1 + visibility: hidden → visible（推荐）
transform: scale(0.9) → scale(1) + opacity: 0 → 1（需额外加 transform-origin）

注意：visibility: hidden 仍占文档流位置，所以气泡必须是 position: absolute 或 fixed，否则会撑开空白。

opacity + visibility 过渡必须同时声明两个属性

只写 transition: opacity 0.2s，visibility 切换仍是瞬时的；只写 transition: visibility 0.2s，浏览器根本不识别——visibility 本身不可动画，但它配合 opacity 的过渡时机，能实现“视觉上渐入+逻辑上可访问”的效果。

正确写法（含默认隐藏态）：

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  margin-top: 4px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}

漏掉任一属性，过渡都会断档：要么先闪出再淡入，要么淡入一半突然消失。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

移动端点击后气泡不保持？别硬扛 :hover

iOS Safari 和 Android Chrome 对 :hover 的处理是“单次触发+立即释放”，点一下就 hover 然后立刻 unhover，气泡闪一下就没了。这不是你 CSS 写错了，是规范行为。

务实解法只有两个：

给触发元素加 tabindex="0"，改用 :focus 替代 :hover（键盘用户也受益）
用 JS 绑定 click，切换一个 class 如 .tooltip-active，再用 CSS 控制该 class 下的伪元素显隐

如果选 :focus 方案，记得加 outline: none 并补上 :focus-visible 保证键盘可访问性。

气泡位置偏移或飘到左上角的定位陷阱

气泡没贴着目标元素、甚至飞到页面左上角，90% 是因为没给触发元素设 position: relative。伪元素 ::before / ::after 的 position: absolute 是相对于最近的 position: relative | absolute | fixed 祖先定位的——如果没找到，就一路回溯到。

必须确认三点：