当使用绝对定位的 overlay 实现文字上移并显示按钮时，因按钮位于 overlay 外部导致鼠标移入即触发 hover 退出，造成按钮不可交互；本文通过重构 dom 结构与 css 选择器关系，使按钮成为 overlay 的子元素，从而保持 hover 状态连续性并支持正常点击。
当使用绝对定位的 overlay 实现文字上移并显示按钮时，因按钮位于 overlay 外部导致鼠标移入即触发 hover 退出，造成按钮不可交互；本文通过重构 dom 结构与 css 选择器关系，使按钮成为 overlay 的子元素，从而保持 hover 状态连续性并支持正常点击。
在原方案中，.overlay、.element1 和 .buttonsContainer 均为同级兄弟元素，依赖 ~（通用兄弟选择器）实现 hover 联动：
.overlay:hover ~ .element1 { transform: translateY(-100px); }
.overlay:hover ~ .buttonsContainer { opacity: 1; }但问题在于：一旦鼠标离开 .overlay 区域（哪怕只是短暂经过 .buttonsContainer），:hover 状态立即失效——因为 .buttonsContainer 并非 .overlay 的后代，其自身 hover 不会“继承”或“维持”父级的 hover 状态，导致视觉闪退、点击失效。
✅ 正确解法是将按钮容器嵌套进 .overlay 内部，使其成为 .overlay 的直系子元素，并改用 >（子选择器）控制显示逻辑：
<div class="container">
<div class="overlay">
<div class="buttonsContainer">
<button class="btn">b</button>
<button class="btn">b</button>
<button class="btn">b</button>
</div>
</div>
<div class="element1">Some texts</div>
</div>对应关键 CSS 修改如下：
.overlay {
position: absolute;
top: 35%;
left: 35%;
background: blue;
opacity: 0.3;
height: 40%;
width: 30%;
z-index: 1;
/* 新增：确保鼠标事件可穿透或捕获 */
pointer-events: auto; /* 默认即 auto，显式声明更清晰 */
}
/* 按钮容器现在是 overlay 的子元素 */
.buttonsContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 居中优化（推荐） */
display: flex;
justify-content: space-around;
width: 200px;
opacity: 0;
transition: opacity 1s;
z-index: 2; /* 确保在 overlay 上层但低于 element1（如需遮挡） */
}
.overlay:hover > .buttonsContainer {
opacity: 1;
}⚠️ 注意事项：
-
pointer-events不要设为none：若曾为解决其他问题添加pointer-events: none到.overlay，必须移除，否则整个遮罩层将完全忽略鼠标事件； -
层级（z-index）需合理安排：
.buttonsContainer的z-index应高于.overlay（如z-index: 2），但若.element1需覆盖部分区域，可设更高值（如z-index: 4）； -
过渡动画兼容性：
transform和opacity是性能友好的 CSS 属性，推荐优先使用；避免对top/left做过渡，易引发重排； -
响应式增强建议：可为
.buttonsContainer添加pointer-events: auto显式声明（虽默认如此），并在按钮上设置cursor: pointer提升可用性感知。
最终效果：鼠标进入 .overlay 区域 → 文字上移 + 按钮淡入 → 鼠标在按钮间移动时，因始终处于 .overlay 内部，:hover 状态持续有效，点击事件可正常触发。该方案结构简洁、语义清晰，无需 JavaScript 即可实现稳定交互。
