如何让鼠标悬停效果作用于两张重叠图片？

问题核心是顶层图片遮挡了底层图片和父容器的hover检测，同时背景缺少缩放的过渡效果。可以通过以下调整实现同步变化：

关键修改点 #

• 将hover触发目标从单个图片改为父容器：当鼠标进入父容器范围时，两张图片同时触发透明度变化，避免顶层图片遮挡导致底层无响应。
• 给父容器添加背景缩放的过渡效果，配合原有鼠标跟随的背景定位，实现完整的缩放交互。
• 修复zoom函数中的offsetY赋值错误，确保鼠标位置计算正确。

完整代码 #

<div class="overlay transparent" onmousemove="zoom(event)"
  style="background-image: url(https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg)">
  <img src="https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg" />
  <img src="https://media.nomadicmatt.com/2023/tropicalislandsfeature.jpg" />
</div>

<style>
  div.transparent {
    height: 150px;
    width: 250px;
    overflow: hidden;
    cursor: zoom-in;
    /* 新增：背景过渡效果，包含缩放和位置 */
    transition: background-size 0.5s, background-position 0.3s;
    background-size: 100%; /* 默认背景尺寸 */
    background-repeat: no-repeat;
  }

  /* 修改：父容器hover时，所有图片同步变透明 */
  div.transparent:hover img {
    opacity: 0;
  }

  div.transparent img {
    transition: opacity 0.5s;
    display: block;
    width: 100%;
  }

  div.overlay {
    position: relative;
    display: inline-block;
  }

  div.overlay img:nth-child(1) {
    position: relative;
    object-fit: contain;
    z-index: 1;
  }

  div.overlay img:nth-child(2) {
    position: absolute;
    object-fit: contain;
    top: 0;
    left: 0;
    z-index: 2;
  }

  /* 新增：父容器hover时背景缩放 */
  div.transparent:hover {
    background-size: 120%;
  }
</style>

<script>
 function zoom(e) {
    var zoomer = e.currentTarget;
    // 修复offsetY的赋值错误
    const offsetX = e.offsetX ? e.offsetX : e.touches[0].pageX;
    const offsetY = e.offsetY ? e.offsetY : e.touches[0].pageY;
    const x = offsetX / zoomer.offsetWidth * 100;
    const y = offsetY / zoomer.offsetHeight * 100;
    zoomer.style.backgroundPosition = `${x}% ${y}%`;
 }
</script>

效果说明 #

• 鼠标进入容器区域时，两张图片同时逐渐透明，背景图片以鼠标位置为中心放大。
• 鼠标在容器内移动时，背景图片会跟随鼠标位置调整显示中心，实现聚焦缩放的效果。
• 所有过渡动画保持0.5秒的平滑时长，交互体验更连贯。

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