Css 未重定向到<；的右侧链接；a>；在幻灯片动画中

目标

当点击“无Flash信用卡”时，我希望用户转到作者的图片链接

问题

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

如何解决这个问题

请注意，信用卡代码由Unsplash提供

代码

正文{
保证金：0；
填充：0；
}
.幻灯片{
位置：绝对位置；
宽度：100%；
身高：100%；
背景重复：无重复；
背景尺寸：封面；
}
.幻灯片-1{
背景图像：url（“https://images.unsplash.com/photo-1580118797218-2413f9d2e36b?ixlib=rb-1.2.1&ixid=eyjhchbawqiojf9&auto=format&fit=crop&w=1778&q=80“；
动画：fade1 10s无限；
}
.幻灯片-2{
背景图像：url（“https://images.unsplash.com/photo-1558981420-c532902e58b4?ixlib=rb-1.2.1&ixid=EYJHCBFAWQIOJEYMDD9&auto=format&fit=crop&w=1754&q=80“；
动画：fade2 10s无限；
}
.幻灯片-3{
背景图像：url（“https://images.unsplash.com/photo-1581071727451-75cf45dc1bb2?ixlib=rb-1.2.1&ixid=EYJHCBFAWQIOJEYMDD9&auto=format&fit=crop&w=1500&q=80“；
动画：fade3 10s无限；
}
@关键帧淡入淡出1{
0% {
不透明度：0；
}
33% {
不透明度：1；
}
}
@关键帧淡入淡出2{
33% {
不透明度：0；
}
67% {
不透明度：1；
}
}
@关键帧fade3{
67% {
不透明度：0；
}
100% {
不透明度：1；
}
}

---

当您将

不透明度

从

1

更改为

0

时，将

z索引

从

100

更改为

10

。不透明度不会禁用事件处理（顶层仍有点击检测），但

z-index

会将可见元素移动到顶部，以人为更改处理。这里可以找到一个工作示例：

当您将

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