hover时display切换常失效，因display: none彻底移除渲染盒导致悬停“断连”；应改用visibility+opacity组合、伪元素绑定或留出缓冲区，并兼顾可访问性与移动端兼容性。
hover时display切换为什么经常失效
因为display: none会彻底移除元素的渲染盒，导致鼠标一移过去就“断连”——悬停目标消失，触发器（比如按钮）和提示框之间没重叠区域，浏览器立刻结束:hover状态，提示框闪一下就没了。
常见错误现象：div:hover + .tooltip { display: block; }在提示框紧贴触发器时大概率不生效；用display做过渡动画完全无效（CSS不支持display的过渡）。
- 改用
visibility: hidden/visible+opacity组合，保留占位且支持过渡 - 确保触发器与提示框在DOM中相邻或用
position: absolute让提示框“盖住”悬停热区 - 如果必须用
display，加至少10px的margin或padding在两者之间留出悬停缓冲区
纯CSS实现hover显示说明的最小可靠写法
关键不是“能不能”，而是“怎么避免断连”。最简可行方案是把提示框包进触发器内部，用position: absolute定位，靠父容器的:hover控制子元素显示：
<button class="help-trigger">设置</button>
<style>
.help-trigger {
position: relative;
}
.help-trigger::after {
content: "点击进入高级配置";
position: absolute;
top: 100%;
left: 0;
background: #333;
color: white;
padding: 4px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
.help-trigger:hover::after {
opacity: 1;
visibility: visible;
}
</style>
这样不用额外HTML标签，无DOM结构依赖，::after伪元素始终绑定在按钮上，悬停不会丢失。
立即学习“前端免费学习笔记（深入）”；
display vs visibility在可访问性上的实际差别
display: none会让屏幕阅读器完全忽略内容，visibility: hidden虽不可见但仍被读取——这对辅助技术用户可能是干扰。真正需要“隐藏但可访问”的场景，应该用aria-hidden="true"配合visibility，或者用clip-path或transform: scale(0)这类视觉隐藏但语义保留的方式。
- 仅视觉提示类说明（如图标旁文字气泡），用
visibility + opacity足够 - 含操作控件（如“删除”确认弹层），必须用
display: none/block并手动管理tabindex和焦点流 - 所有hover提示都应有键盘等效触发方式，不能只依赖鼠标
React/Vue里用display控制显隐要注意什么
框架组件常自带key或条件渲染（如v-if、{show && <tooltip></tooltip>}），这本质就是display: none的JS层实现，同样面临悬停断连问题。直接用CSS控制反而更可控。
实操建议：
- 不要在
onMouseEnter里setState({ show: true })再靠class切display——状态更新+重排+样式计算有延迟，容易闪 - 把提示框作为子组件内联渲染，用
style={{ opacity, visibility }}受控，而非条件渲染 - 移动端慎用
hover，iOS Safari对:hover支持不稳定，优先用click或focus触发
overflow: hidden意外裁剪、以及当提示框出现在视口边缘时要不要自动翻转方向——这些没法靠display解决，得靠getBoundingClientRect()算位置，或者交给@floating-ui/dom这类库。 
