Overlay交互异常：按钮无法点击与悬停的问题及诉求

问题根源在于你将hover事件绑定在了overlay元素上，当鼠标移至按钮区域时，鼠标离开overlay导致hover状态失效，文本和按钮随即恢复初始状态。我们可以通过将hover触发对象替换为父容器container来解决这个问题——所有交互元素都处于container范围内，只要鼠标未离开container，就会维持hover状态。

修改后的完整代码如下：

CSS #

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.container {
  height: 50%;
  width: 50%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* 确保内部绝对定位元素以容器为基准 */
}

.overlay {
  position: absolute;
  top: 35%;
  left: 35%;
  background: blue;
  opacity: 0.3;
  height: 40%;
  width: 30%;
  z-index: 1;
}

.element1 {
  color: white;
  font-size: 3rem;
  font-weight: bold;
  transition: transform 1s;
}

.buttonsContainer {
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translateX(-50%); /* 实现水平居中 */
  width: 200px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  opacity: 0;
  transition: opacity 1s;
  z-index: 3; /* 提前设置层级，避免hover时闪烁 */
}

/* 替换为容器hover触发样式 */
.container:hover .element1 {
  transform: translateY(-100px);
}

.container:hover .buttonsContainer {
  opacity: 1;
}

.btn:hover {
  color: red;
  cursor: pointer;
}

HTML #

<div class="container">
  <div class="overlay"></div>
  
  <div class="element1">Some texts</div>
  
  <div class="buttonsContainer">
    <button class="btn">b</button>
    <button class="btn">b</button>
    <button class="btn">b</button>
  </div>
</div>

关键修改说明： #

• 给.container添加position: relative，修正内部绝对定位元素的基准容器，避免按钮位置偏移。
• 将hover触发目标从.overlay改为.container，确保鼠标在容器内（含按钮区域）时始终保持hover状态。
• 调整.buttonsContainer的定位逻辑，使用left:50% + transform: translateX(-50%)实现更可靠的水平居中。
• 提前设置.buttonsContainer的z-index，避免hover时出现层级闪烁问题。

修改后效果：鼠标进入.container（包括overlay区域）时，文本上移、按钮显示；鼠标悬停在按钮上时，因仍处于.container范围内，hover状态保持，按钮可正常点击和触发悬停样式；仅当鼠标完全离开.container区域时，才恢复初始状态。

内容的提问来源于stack exchange，提问作者Anant