没有被重定向到幻灯片动画中 <a> 的正确链接答案

【问题标题】：Not being redirected to the right link of <a> in a slide animation没有被重定向到幻灯片动画中 <a> 的正确链接
【发布时间】：2020-02-10 18:48:34
【问题描述】：

目标

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

问题

虽然当点击此动画的三个标志中的任何一个时，在转换过程中会显示正确的标志及其各自的图片，但用户被重定向到的始终是 slide-3 的链接。但是，正确的链接包含在三张幻灯片中每一张的 href 中。似乎最后一个链接，即最后一张幻灯片（slide-3）的链接已兑现，尽管显示了正确的徽章，但完全忽略了前两个链接......

如何解决？

请注意，信用徽章代码由 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>

【问题讨论】：

标签： css sass css-animations href keyframe

【解决方案1】：

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

【讨论】：