Flexbox两列布局图片悬停覆盖层异常及范围问题求助

你的核心问题出在容器定位规则和flex项的高度拉伸特性上，下面是具体修正方案：

关键问题拆解 #

1. Overlay不显示：.overlay用了绝对定位，但父容器#img-container没设置position: relative，导致绝对定位参考的不是图片容器，而是更上层的元素；同时默认flex布局下，.col-right会被拉伸到和左列等高，图片容器也跟着撑高，overlay位置完全错位。
2. 悬停触发范围过大：你把hover事件绑定在.col-right上，而这个列被拉伸到左列高度，自然图片下方空白区域也会触发效果。

修正后的代码实现 #

HTML（结构无需改动） #

<div class="flex-container">
  <div class="col-left">
    <p>大量文本内容...（此处省略）</p>
  </div>
  <div class="col-right">
    <div id="img-container">
      <img src="https://picsum.photos/800/600" alt="示例图片">
      <div class="overlay"></div>
    </div>
  </div>
</div>

CSS（核心修改点标注） #

.flex-container {
  display: flex;
  width: 100%;
}

.col-left {
  width: 60%;
  background-color: #eee;
  padding: 1rem;
}

.col-right {
  width: 40%;
  /* 新增：让右列高度只包裹内容，不被拉伸到左列高度 */
  align-self: flex-start;
  padding: 1rem;
  background-color: #ddd;
}

#img-container {
  position: relative; /* 新增：让overlay的绝对定位以它为参考 */
  width: 100%; /* 确保容器填满右列宽度 */
  /* 去掉原有的height: 100%，避免强制撑高 */
}

#img-container img {
  width: 100%; /* 图片填满容器宽度，响应式自适应 */
  display: block; /* 去掉图片下方默认的空白间隙 */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 现在会和图片容器高度一致 */
  background-color: rgba(0, 255, 0, 0.5);
  transition: opacity 0.3s ease; /* 增加过渡动画更自然 */
}

/* 修改：hover绑定在图片容器上，只触发图片范围 */
#img-container:hover .overlay {
  opacity: 0;
}

核心要点说明 #

• align-self: flex-start：解决右列被flex拉伸的问题，让它的高度仅由内部图片决定，避免下方出现空白触发悬停。
• position: relative：给图片容器设置相对定位，让绝对定位的overlay能精准覆盖图片区域。
• 移除#img-container的height: 100%：强制高度会导致容器撑高到右列（原拉伸后）的高度，现在让容器高度由图片自动撑开。
• 图片设置display: block：消除inline元素默认的底部间隙，确保容器高度和图片完全一致。

这样修改后，overlay会正常显示在图片上方，只有鼠标悬停在图片范围内时才会触发消失效果，同时完全满足响应式要求，不用手动设置固定尺寸。

内容的提问来源于stack exchange，提问作者oreo-soup