在幻灯片动画中未被重定向到 <a> 的右侧 link

Not being redirected to the right link of <a> in a slide animation

AIM

当点击 Unsplash 信用徽章时，我希望用户转到作者的图片 link。

问题

虽然在点击此动画的三个徽章中的任何一个时，在过渡期间会显示正确的徽章及其各自的图片，但它始终是 slide-3[=39] 的 link =] 用户被重定向到。但是，正确的 link 包含在三张幻灯片的每张幻灯片的 href 中。似乎最后一个 link，即最后一张幻灯片 (slide-3) 的 link 已兑现，尽管显示了正确的徽章，但完全忽略了前两个 link...

如何解决？

请注意信用徽章代码由 Unsplash 提供。

代码

body {
  margin: 0;
  padding: 0;
}

.slide {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}

.slide-1 {
background-image: url("https://images.unsplash.com/photo-1580118797218-2413f9d2e36b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=1778&q=80");
animation: fade1 10s infinite;
}
.slide-2 {
background-image: url("https://images.unsplash.com/photo-1558981420-c532902e58b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1754&q=80");
animation: fade2 10s infinite;
}
.slide-3 {
background-image: url("https://images.unsplash.com/photo-1581071727451-75cf45dc1bb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80");
animation: fade3 10s infinite;
}

@keyframes fade1 {
  0% {
    opacity: 0;
  }

  33% {
    opacity: 1;
  }
}

@keyframes fade2 {
  33% {
    opacity: 0;
  }

  67% {
    opacity: 1;
  }
}

@keyframes fade3 {
  67% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

<body>

  <div class="slide slide-1">
    <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@robertbahn?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Robert Bahn"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Robert Bahn</span></a>
  </div>

  <div class="slide slide-2">
    <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@harleydavidson?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Harley-Davidson"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Harley-Davidson</span></a>
  </div>

  <div class="slide slide-3">
    <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@mbuff?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Sung Jin Cho"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Sung Jin Cho</span></a>
  </div>

</body>

当您将 opacity 从 1 更改为 0 时，请将 z-index 从 100 更改为 10。不透明度不会禁用事件处理（顶层仍然具有点击检测），但 z-index 将可见元素移动到顶部以人为地更改处理。可以在此处找到一个工作示例：CodePen