hover移开tooltip消失是因为其未作为触发元素的子元素嵌套，且父容器未设position: relative；应将tooltip置于触发元素内部，父容器设relative，并用opacity+visibility+transition组合控制显隐。
用 position: absolute 做 tooltip 时，为什么 hover 一移开提示就消失了？
因为 position: absolute 的元素默认脱离文档流，如果它和触发元素（比如按钮）之间没有父子包裹关系，:hover 状态只作用于触发元素本身，鼠标一离开它，就立刻失去 hover，tooltip 自然消失。
关键不是 opacity 动画本身的问题，而是结构没搭对。解决方法只有一个：让 tooltip 成为触发元素的**子元素**，且父容器设 position: relative。
- 触发元素（如
<button></button>）必须是 tooltip 的直接或间接父级 - 父容器加
position: relative，否则absolute会相对于最近的定位祖先（可能是 body）偏移 - tooltip 默认
opacity: 0; visibility: hidden;，hover 父容器时才改状态
opacity + transition 配合 hover 的写法要点
只靠 opacity 切换不够，必须加 transition 控制动画节奏，同时建议搭配 visibility 防止点击穿透或占位干扰。
-
opacity只控制透明度，不影响事件响应和布局占位；visibility: hidden才真正让元素不可交互、不参与渲染（但保留空间） - 推荐组合：
opacity: 0; visibility: hidden;→ hover 时 →opacity: 1; visibility: visible; -
transition必须写在「非 hover 状态」的规则里，否则第一次 hover 不会动效
button {
position: relative;
}
.tooltip {
position: absolute;
top: 120%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
font-size: 12px;
border-radius: 4px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
button:hover .tooltip {
opacity: 1;
visibility: visible;
}
为什么不用 display: none 替代 visibility？
display: none 会让元素完全退出渲染树，导致 transition 对 opacity 失效——因为元素在动画开始前就没了，浏览器无法插值。
立即学习“前端免费学习笔记（深入）”；
-
display是离散属性，不支持过渡；opacity和visibility才是可过渡的 - 若强行用
display，只能靠 JS 控制 class 切换，失去纯 CSS 的简洁性 - 某些场景下（比如 tooltip 内有 input），
visibility: hidden比opacity: 0更安全——避免键盘焦点误入不可见但可聚焦的元素
移动端 hover 失效怎么办？
手机上没有「悬停」概念，:hover 仅在模拟器或部分 Android 浏览器中临时触发，不能依赖。真实项目中必须补 JS 逻辑或改用 click/tap 触发。
- CSS
:hover在 iOS Safari 中基本无效（除了少数情况如链接） - 如果必须兼容移动端，把 tooltip 显示逻辑交给 JS：监听
touchstart或click，切换类名 - 或者用
@media (hover: hover)做特性检测，PC 用 hover，移动端 fallback 到 click
纯 CSS 的 hover tooltip 本质是个桌面端优化技巧，别把它当成跨端通用方案。
