通过 CSS 的 opacity 和 transition 属性组合，可实现鼠标悬停时平滑、带延迟地显示目标元素，避免突兀的 display: none/block 切换（后者不支持过渡动画）。
通过 css 的 `opacity` 和 `transition` 属性组合，可实现鼠标悬停时平滑、带延迟地显示目标元素，避免突兀的 `display: none/block` 切换（后者不支持过渡动画）。
在 CSS 中，display 属性是不可动画化的——即你无法对 display: none → display: block 设置 transition，因此原代码中 .sthelse:hover + .sth { display: block; transition: 2s; } 实际不会产生任何过渡效果，元素会瞬间出现。
✅ 正确做法是改用 opacity + visibility 或 pointer-events 配合过渡，既保持可动画性，又确保元素在隐藏时不占用布局空间（可选）且不可交互。
推荐方案：Opacity 过渡（简洁可靠）
.sth {
opacity: 0;
transition: opacity 0.3s ease-in-out; /* 推荐使用明确属性名和缓动函数 */
/* 可选：提升性能 & 防止点击穿透 */
pointer-events: none;
}
.sthelse:hover + .sth {
opacity: 1;
pointer-events: auto;
}
? 注意：仅靠 opacity: 0 元素仍占据文档流空间。如需完全“隐藏”布局影响，可叠加 visibility: hidden（不可见但保留空间）或 position: absolute + z-index 控制层叠；若需彻底脱离流，建议结合 transform: scale(0) 或 max-height 等技巧（适用于更复杂场景）。
完整可运行示例：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hover Delay Display</title><style>
.sthelse {
padding: 12px 20px;
background: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
display: inline-block;
margin: 20px;
}
.sth {
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
padding: 12px 20px;
background: #28a745;
color: white;
border-radius: 4px;
margin-left: 10px;
display: inline-block;
pointer-events: none;
}
.sthelse:hover + .sth {
opacity: 1;
pointer-events: auto;
}
</style><div class="sthelse">Hover me</div>
<div class="sth">This appears with smooth delay</div>
✅ 关键要点总结：
- ❌ 不要用 display 做过渡 —— 它不支持动画；
- ✅ 优先用 opacity 实现视觉渐显/渐隐，配合 transition 控制持续时间与缓动；
- ✅ 添加 pointer-events: none/auto 防止隐藏状态下误触；
- ✅ 使用 cubic-bezier() 或 ease-* 提升动效专业感；
- ⚠️ 若需响应式隐藏（如移动端禁用），建议结合媒体查询或 JavaScript 控制类名，而非仅依赖 CSS 悬停。
这样即可实现真正可控、流畅、符合现代 Web 体验的悬停延迟显示效果。
