hover 时需同时设置 opacity 和 visibility 控制淡入淡出，避免交互穿透；配合 transition-delay 进出场统一控制，慎用 all；Safari 下加 translateZ(0) 防闪烁；用 data-tooltip + attr() 实现轻量提示。
hover 时用 opacity 实现淡入淡出，但内容始终在 DOM 里
opacity 只控制透明度，不改变元素是否参与布局或能否响应事件。所以 opacity: 0 的元素依然占位、能被聚焦、会触发 pointer-events（除非显式关掉）。常见错误是以为“看不见=不存在”，结果鼠标移过去没反应，或者点击穿透到下层。
- 必须配合
transition: opacity 0.2s ease，否则变化生硬；只写transition: all容易引发意外重绘 - 初始状态设为
opacity: 0; visibility: hidden，悬停时改为opacity: 1; visibility: visible——visibility解决交互穿透问题 - 如果父容器有
overflow: hidden，且悬停内容超出边界，opacity 动画会正常执行，但内容被裁剪，需检查z-index和容器尺寸
transition-delay 导致 hover 延迟出现，但移出时不延迟
很多人想“鼠标停顿一会儿再显示”，于是给 transition-delay 加在 hover 进入上，但忘了移出时默认没 delay，造成“闪一下消失”。这不是 bug，是 CSS transition 的单向特性决定的。
- 进出场都要控制：用两个独立声明，比如
transition: opacity 0.2s ease 0.3s（进）和transition: opacity 0.15s ease 0s（出） - 更稳妥的做法是用
:hover控制 class 切换，配合 JS 监听mouseenter/mouseleave加防抖，避免快速划过触发多次 - 纯 CSS 场景下，
transition-delay超过 300ms 就容易让用户觉得“卡住”，建议控制在 150–250ms
opacity 动画在 Safari 上闪烁或失真
Safari 对 opacity + transform 混合动画的合成层处理比较敏感，尤其当悬停元素含文字或 border-radius 时，可能出现毛边、跳动或半透明残留。
- 强制开启硬件加速：加
transform: translateZ(0)或will-change: opacity（仅对频繁动画元素） - 避免同时过渡
opacity和height/max-height——后者触发布局计算，和 opacity 的合成层冲突 - 如果内容含 subpixel 字体（如 macOS 的抗锯齿），可加
-webkit-font-smoothing: antialiased缓解模糊感
用 data-* 属性动态生成提示内容，而不是写死 HTML
硬编码 tooltip 内容会让 HTML 膨胀、难以维护。用 data-tooltip 存文本，CSS 里用 ::after + attr() 渲染，既轻量又支持多语言切换。
- HTML 示例：
- CSS 关键句：
button:hover::after { content: attr(data-tooltip); opacity: 1; }，记得提前设opacity: 0和transition - 注意：attr() 只取字符串，不解析 HTML；若需富文本，得用 JS 插入，此时 opacity 动画要绑定到 JS 创建的元素上
实际用的时候，最常被忽略的是 visibility 和 pointer-events 的组合——光靠 opacity 不足以让提示真正“可交互”或“不干扰”。动效只是表象，底层的交互状态才是关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
