通过 CSS 的 opacity 和 transition 属性组合，可实现鼠标悬停另一元素时，目标元素以淡入方式延时显示，避免突兀的 display: none/block 切换导致的过渡失效问题。
通过 css 的 `opacity` 和 `transition` 属性组合，可实现鼠标悬停另一元素时，目标元素以淡入方式延时显示，避免突兀的 `display: none/block` 切换导致的过渡失效问题。
在 CSS 中，display 属性（如 display: none → block）不可动画化，因此直接对其设置 transition 不会产生任何过渡效果。若希望实现“悬停后延迟显示并带淡入动画”，正确做法是改用可过渡的属性，最常用且语义清晰的是 opacity（配合 visibility 或 pointer-events 优化交互体验）。
以下是一个完整、可靠的实现方案：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hover Delay Display</title><style>
.sth {
opacity: 0;
visibility: hidden; /* 防止初始状态占据空间或响应点击 */
transition: opacity 0.3s ease, visibility 0.3s ease;
/* 注意：visibility 过渡需配合 opacity，否则会立即消失/出现 */
}
.sthelse:hover + .sth {
opacity: 1;
visibility: visible;
}
</style><div class="sthelse">hover me</div>
<div class="sth">this appears smoothly on hover</div>
✅ 关键要点说明：
- ✅ 使用 opacity（0→1）实现视觉上的渐显/渐隐；
- ✅ 配合 visibility: hidden/visible 确保元素在隐藏时不响应事件、不占用交互空间（display: none 虽彻底移除，但无法过渡）；
- ✅ transition 同时声明多个属性（opacity 和 visibility），确保行为一致；
- ⚠️ 不推荐仅靠 opacity 而忽略 visibility：透明元素仍可接收鼠标事件（如点击、聚焦），可能引发意外交互；
- ⚠️ 若需更长延迟（如悬停 0.5 秒后再开始动画），可结合 transition-delay 或 JavaScript setTimeout，但纯 CSS 场景下建议优先使用 transition-delay 控制起始时机：
.sth {
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease 0.2s, visibility 0.4s ease 0.2s;
}
.sthelse:hover + .sth {
opacity: 1;
visibility: visible;
}
以上代码中 0.2s 即为悬停后延迟 200ms 再启动过渡动画，提升用户体验的精准性与可控性。
总结：要实现“悬停触发 + 延迟显示 + 平滑过渡”，请放弃 display，拥抱 opacity + visibility + transition 组合——这是现代 CSS 实现此类交互动画的标准、高效且语义正确的实践方式。
