CSS动画是否干扰了图片链接的hover与点击功能？

我设置了四张围绕中心点旋转（类似摩天轮效果）的图片，每张都是指向视频的<a>链接；预期用户hover图片时，其opacity降低且可点击跳转。但在浏览器中，图片hover无变化，也无法触发链接跳转。这些图片设置为position: absolute，需要放置在一张大图前方（这也是transform取值夸张的原因）。

原代码示例 #

CSS

a img.animated {
  position: absolute;
  animation: example 10s linear infinite;
  border-radius: 10px;
}

a:hover img.animated {
  opacity: 80%;
}

@keyframes example {
  0% {
    transform: translate(65%, -280%);
  }
  8.2% {
    transform: translate(77%, -340%);
  }
  16.5% {
    transform: translate(112%, -383%);
  }
  25% {
    transform: translate(160%, -400%);
  }
  33.2% {
    transform: translate(208%, -383%);
  }
  41.5% {
    transform: translate(238%, -340%);
  }
  50% {
    transform: translate(250%, -280%);
  }
  58.2% {
    transform: translate(238%, -220%);
  }
  66.5% {
    transform: translate(208%, -167%);
  }
  75% {
    transform: translate(160%, -150%);
  }
  88.2% {
    transform: translate(112%, -167%);
  }
  96.5% {
    transform: translate(77%, -220%);
  }
  100% {
    transform: translate(65%, -280%);
  }
}

HTML

<a href="https://www.youtube.com/example" target="_blank"><img class="animated" src="https://picsum.photos/id/1/200/300" alt="onevideo" /></a>

问题原因 #

动画和transform直接应用在img元素上，但<a>标签的布局盒模型不会跟随img的视觉变换移动。也就是说，图片被动画移走后，<a>的点击/hover区域还停留在原始位置，自然无法触发预期效果。

修复方案 #

把动画、定位属性转移到<a>标签上，让链接的布局盒模型跟随动画变换，确保点击/hover区域和图片视觉位置一致：

修复后CSS

a.animated-link {
  position: absolute;
  animation: example 10s linear infinite;
  border-radius: 10px;
  /* 让a标签包裹住图片，确保点击区域覆盖整个图片 */
  display: inline-block;
}

a.animated-link img {
  border-radius: 10px;
}

a.animated-link:hover img {
  opacity: 0.8;
}

/* 动画代码保持不变 */
@keyframes example {
  0% {
    transform: translate(65%, -280%);
  }
  8.2% {
    transform: translate(77%, -340%);
  }
  16.5% {
    transform: translate(112%, -383%);
  }
  25% {
    transform: translate(160%, -400%);
  }
  33.2% {
    transform: translate(208%, -383%);
  }
  41.5% {
    transform: translate(238%, -340%);
  }
  50% {
    transform: translate(250%, -280%);
  }
  58.2% {
    transform: translate(238%, -220%);
  }
  66.5% {
    transform: translate(208%, -167%);
  }
  75% {
    transform: translate(160%, -150%);
  }
  88.2% {
    transform: translate(112%, -167%);
  }
  96.5% {
    transform: translate(77%, -220%);
  }
  100% {
    transform: translate(65%, -280%);
  }
}

修复后HTML

<a href="https://www.youtube.com/example" target="_blank" class="animated-link">
  <img src="https://picsum.photos/id/1/200/300" alt="onevideo" />
</a>

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