如何将我的 CSS 幻灯片中的每个图像链接到我网站上的不同页面？

Question

我构建了一个纯 css 幻灯片，它可以旋转图像。但我也希望这些图片是可点击的链接，可将您带到网站的相关页面，而这正是我遇到问题的地方。

图像确实显示为链接，但它们都指向第四张幻灯片的 url，我无法弄清楚我需要更改什么才能使链接与其对应的图像一致地旋转。

更新：当我按照 user45250 的回答建议更改 z-index 时，它使所有图像都指向第一张幻灯片的链接，而不是最后一张。但我需要每张图片指向一个不同的页面。

更新 2： 我很确定 z-index 以某种方式与问题有关，现在我可以让链接旋转。我将每个图像的 z-index 设置为 4，因为它的不透明度设置为 1 而不是 0（请参阅下面的更新代码）但是链接仍然赢了'不与图像同步。现在，当幻灯片加载时，链接会快速循环通过所有四个，而第一个图像仍然存在，然后在第四个链接处停止，直到幻灯片重新开始。我还可以进行哪些更改才能使其正常工作？

这是我的html：

<div id="show">
   <a href="newproduct.html" class="img1 slide"><div>
    <img class="slideimg" src="images/new.png" alt="New Product"></div>
   </a>
   <a href="joinlist.html" class="img2 slide"><div>
    <img class="slideimg" src="images/mailinglist.png" alt="Join Our Mailing List!"></div>
   </a>
   <a href="firesale.html" class="img3 slide"><div>
     <img class="slideimg" src="images/firesale.png" alt="Shop the Fire Sale"></div>
   </a>
   <a href="giftcards.html" class="img4 slide"><div>
     <img class="slideimg" src="images/giftcards.png" alt="Buy Gift Cards"></div>
   </a>
</div>

更新 CSS：

/* slideshow frame */


    #show {
      display:block;
        margin:0px;
        position: relative;
        padding:0px;
        border: 3px solid #000000;
        z-index:1;
    }

    #show .slide {
        position: absolute;
        overflow: hidden;
        text-align: center;
    }

.img1 {
animation: img1 40s infinite;
-o-animation: img1 40s infinite;
-moz-animation: img1 40s infinite;
-webkit-animation: img1 40s infinite;
}

.img2 {
animation:img2 40s infinite;
o animation: img2 40s infinite;
moz animation: img2 40s infinite;
-webkit-animation: img2 40s infinite;
}

.img3 {
animation:img3 40s infinite;
o animation: img3 40s infinite;
moz animation: img3 40s infinite;
-webkit-animation: img3 40s infinite;
}

.img4 {
animation:img4 40s infinite;
o animation: img4 40s infinite;
moz animation: img4 40s infinite;
-webkit-animation: img4 40s infinite;
}

/* keyframing */

@-webkit-keyframes img1 {
0% {opacity: 0;}
25% {opacity: 1;
z-index:4;}
50% {opacity: 0;}
75% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes img1 {
0% {opacity: 0;}
25% {opacity: 1;
z-index:4;}
50% {opacity: 0;}
75% {opacity: 0;}
100% {opacity: 0;}
}

@-moz-keyframes img1 {
0% {opacity: 0;}
25% {opacity: 1;
z-index:4;}
50% {opacity: 0;}
75% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes img2 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 1;
z-index:4;}
75% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes img2 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 1;
z-index:4;}
75% {opacity: 0;}
100% {opacity: 0;}
}

@-moz-keyframes img2 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 1;
z-index:4;}
75% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes img3 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 0;}
75% {opacity: 1;
z-index:4;}
100% {opacity: 0;}
}

@keyframes img3 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 0;}
75% {opacity: 1;
z-index:4;}
100% {opacity: 0;}
}

@-moz-keyframes img3 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 0;}
75% {opacity: 1;
z-index:4;}
100% {opacity: 0;}
}

@-webkit-keyframes img4 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 0;}
75% {opacity: 0;}
100% {opacity: 1;
z-index:4;}
}

@keyframes img4 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 0;}
75% {opacity: 0;}
100% {opacity: 1;
z-index:4;}
}

@-moz-keyframes img4 {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 0;}
75% {opacity: 0;}
100% {opacity: 1;
z-index:4;}
}

知道我哪里出错了吗？

Answer 1

没有测试你的代码，但你可以尝试添加 z-index 来为每个 img 设置排序：

.img1 {
z-index:4;
}

.img2 {
z-index:3;
}

.img3 {
z-index:2;
}


.img4 {
z-index:1;
}

这给了img1的最大数字，然后是img2到img4.