循环渲染前后对比图时鼠标hover效果异常问题求助

嘿，这个问题我之前踩过坑！核心原因就是绝对定位的参考容器没设置对——当你给.Overlay用绝对定位时，如果它的父元素没有设置position: relative，所有的Overlay都会默认相对于页面最外层容器（比如<body>）定位，结果就全堆在第一个位置了。下面给你一套能解决问题的具体方案：

1. 给每个对比图组加独立的相对定位父容器 #

首先，把每一组「前图+后图」都包裹在一个独立的容器里，并且给这个容器设置position: relative。这个属性是关键，它会让容器内的绝对定位元素（也就是你的Overlay）以这个容器为基准定位，而不是整个页面。

示例HTML结构（如果是循环生成，确保每个循环项都生成这个结构）：

<!-- 第一组对比图 -->
<div class="compare-wrapper">
  <img src="before-1.jpg" alt="Before 1" class="before-img">
  <div class="Overlay">
    <img src="after-1.jpg" alt="After 1" class="after-img">
  </div>
</div>

<!-- 第二组对比图 -->
<div class="compare-wrapper">
  <img src="before-2.jpg" alt="Before 2" class="before-img">
  <div class="Overlay">
    <img src="after-2.jpg" alt="After 2" class="after-img">
  </div>
</div>

2. 调整CSS让Overlay绑定到父容器 #

修改你的CSS，确保.Overlay的定位完全贴合父容器，并且hover效果只作用于当前组：

/* 每个对比图的父容器 */
.compare-wrapper {
  position: relative; /* 核心：让子元素绝对定位以它为基准 */
  width: 600px; /* 自定义宽度，也可以用百分比适配 */
  height: auto;
  margin: 20px 0; /* 给每组加间距，避免重叠 */
  overflow: hidden; /* 防止图片溢出容器 */
}

/* 前图样式 */
.before-img {
  width: 100%;
  display: block;
}

/* 后图的Overlay容器 */
.Overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 0; /* 初始隐藏，hover时展开 */
  height: 100%;
  overflow: hidden;
  transition: width 0.5s ease; /* 平滑展开动画 */
}

/* 后图样式 */
.after-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，避免拉伸 */
}

/* hover时展开当前组的Overlay */
.compare-wrapper:hover .Overlay {
  width: 100%;
}

3. 额外优化（可选） #

如果想要更灵活的交互（比如拖动滑块对比），可以把hover触发改成拖动事件，但上面的方案已经能解决你当前「多个对象位置错乱」的核心问题。

每个.compare-wrapper都是独立的相对定位容器，它里面的.Overlay绝对定位时，会以自己的父容器左上角为原点计算位置，不会和其他组的Overlay产生位置冲突。循环生成多少组，就会有多少个独立的定位参考系，自然不会出现后图跑错位置的情况。

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