如何给悬停触发的元素显示添加延迟过渡效果

作者：袖梨 2026-07-06

通过 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 等技巧（适用于更复杂场景）。

完整可运行示例：

<!DOCTYPE html><html lang="en"><head>  <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></head><body>  <div class="sthelse">Hover me</div>  <div class="sth">This appears with smooth delay</div></body></html>