图片滚动跑马灯悬停标题错位问题技术求助

你实现的图片滚动跑马灯效果，悬停显示“立即购买”链接的功能已完成，但所有链接重叠在一起，无法对应到各自的商品图片上方。核心问题是绝对定位的.title元素没有相对定位的父容器做参照，导致所有链接都以页面或最外层容器为基准定位，而非对应图片。

1. 调整HTML结构 #

把每张图片和对应的链接包裹在一个相对定位的容器里，让链接的绝对定位基于这个容器：

<div id="slider">
  <div class="images">
    <!-- 每个商品单独用容器包裹 -->
    <div class="product-item">
      <img class="image" src="https://images.pexels.com/photos/8128069/pexels-photo-8128069.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Product One" width="250" height="400" />
      <p class="title"><a href="#">PRODUCT ONE</a></p>
    </div>

    <div class="product-item">
      <img class="image" src="https://images.pexels.com/photos/8490222/pexels-photo-8490222.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Product Two" width="250" height="400" />
      <p class="title"><a href="#">PRODUCT TWO</a></p>
    </div>

    <div class="product-item">
      <img class="image" src="https://images.pexels.com/photos/12035708/pexels-photo-12035708.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Product Three" width="250" height="400" />
      <p class="title"><a href="#">PRODUCT THREE</a></p>
    </div>

    <div class="product-item">
      <img class="image" src="https://images.pexels.com/photos/7795689/pexels-photo-7795689.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Product Four" width="250" height="400" />
      <p class="title"><a href="#">PRODUCT FOUR</a></p>
    </div>

    <div class="product-item">
      <img class="image" src="https://images.pexels.com/photos/8490114/pexels-photo-8490114.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Product Five" width="250" height="400" />
      <p class="title"><a href="#">PRODUCT FIVE</a></p>
    </div>
  </div>
</div>

2. 修改CSS样式 #

给.product-item添加相对定位，调整.title的定位基准，同时优化悬停逻辑（只在当前商品悬停时显示链接）：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

#slider {
  width: 800px;
  margin: 20px auto;
  overflow: hidden;
}

#slider .images {
  width: 1835px;
  display: inline-block;
  animation: marquee 35s linear infinite;
}

@keyframes marquee {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: calc(-1835px + 608px);
  }
}

/* 新增商品容器样式，设置相对定位 */
.product-item {
  position: relative;
  display: inline-block;
  padding: 5px;
}

/* 把原.image的hover样式移到容器上 */
.product-item:hover {
  border: 1px solid #000;
}

#slider .images:hover {
  animation-play-state: paused;
}

.title {
  position: absolute;
  width: calc(100% - 10px); /* 减去容器的padding */
  left: 5px;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease;
  font-family: 'Darker Grotesque', sans-serif;
  letter-spacing: .2em;
  padding: 12px 20px;
  color: #fff;
  background-color: rgba(0,0,0,0.7); /* 添加半透明背景提升可读性 */
  z-index: 1;
}

.title a {
  color: #fff;
  text-decoration: none;
}

/* 只在当前商品容器悬停时显示链接 */
.product-item:hover .title {
  opacity: 1;
}

额外建设性意见 #

• 动画中的宽度值1835px和608px是硬编码，建议用CSS变量统一管理，后续修改商品数量或尺寸时更方便：

  :root {
    --product-width: 260px; /* 图片宽度+padding+边框 */
    --product-count: 5;
    --slider-width: 800px;
  }
  #slider .images {
    width: calc(var(--product-width) * var(--product-count));
  }
  @keyframes marquee {
    100% {
      margin-left: calc(-1 * var(--product-width) * var(--product-count) + var(--slider-width));
    }
  }
  

• 给.title添加半透明背景，避免文字和图片内容重叠导致可读性差；
• 图片添加alt属性的具体描述，提升可访问性；
• 跑马灯动画在移动端可能体验不佳，可通过媒体查询在小屏幕上暂停动画或改为横向滚动。

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