如何在我的纯CSS滑块中为每个图像添加唯一链接？

Question

原文：

CSS：

.wavsplashslider {position: relative; height:392px; overflow:hidden; } 
    .slideimg:hover {cursor:pointer} 
    .wavsplashslide {position: absolute;top: 0; left: 0;z-index: -5; 
    -webkit-animation: slideshow 12s linear 0s infinite;-moz-animation: slideshow 12s linear 0s infinite;-ms-animation: slideshow 12s linear 0s infinite;-o-animation: slideshow 12s linear 0s infinite;animation: slideshow 12s linear 0s infinite;} 
    .wavsplashslide:hover {cursor:pointer} 
    .wavsplashslide:nth-child(2) {z-index: -4;-webkit-animation: slideshow 12s linear 4s infinite;-moz-animation: slideshow 12s linear 4s infinite;-ms-animation: slideshow 12s linear 4s infinite;-o-animation: slideshow 12s linear 4s infinite;animation: slideshow 12s linear 4s infinite;} 
    .wavsplashslide:nth-child(3) {z-index: -3; 
    -webkit-animation: slideshow 12s linear 8s infinite;-moz-animation: slideshow 12s linear 8s infinite;-ms-animation: slideshow 12s linear 8s infinite;-o-animation: slideshow 12s linear 8s infinite;animation: slideshow 12s linear 8s infinite;} 
    @-webkit-keyframes slideshow {25% { opacity: 1;}33.33% { opacity: 0;} 91.66% { opacity: 0;}100% { opacity: 1;}} 
    @-moz-keyframes slideshow {25% { opacity: 1;}33.33% { opacity: 0;} 91.66% { opacity: 0;}100% { opacity: 1;}} 
    @-ms-keyframes slideshow {25% { opacity: 1;}33.33% { opacity: 0;} 91.66% { opacity: 0;}100% { opacity: 1;}} 
    @-o-keyframes slideshow {25% { opacity: 1;}33.33% { opacity: 0;} 91.66% { opacity: 0;}100% { opacity: 1;}} 
    @keyframes slideshow {25% { opacity: 1;}33.33% { opacity: 0;} 91.66% { opacity: 0;}100% { opacity: 1;}} 

HTML：

<div class="wavsplashslider"> 
    <div class="wavsplashslide"> 
    <a href="http://stackoverflow.com/"><img src="bird.jpg" /></a> 
    </div> 
    <div class="wavsplashslide"> 
    <a href="http://stackoverflow.com/questions"><img src="solid.jpg" /></a> 
    </div> 
    <div class="wavsplashslide"> 
    <a href="http://stackoverflow.com/tags"><img src="design.jpg" /></a> 
    </div> 
    </div> 

更新：

感谢您的帮助！现在任何人都可以给我一个关于如何减慢幻灯片的提示吗？我希望所有幻灯片的显示时间与页面加载时的第一张幻灯片相同，但在第一张幻灯片之后，他们开始快速循环。

.wavsplashslider {position: relative; top: 0; left: 0; width: 824px; height:392px; overflow:hidden; } 
.wavsplashslide {width: 824px; height:392px; position: absolute; top: 0; left: 0;-webkit-animation: slideshow 12s linear 0s infinite;-moz-animation: slideshow 12s linear 0s infinite;-ms-animation: slideshow 12s linear 0s infinite;-o-animation: slideshow 12s linear 0s infinite;animation: slideshow 12s linear 0s infinite;} 
.wavsplashslide:nth-child(2) {-webkit-animation: slideshow 12s linear 4s infinite;-moz-animation: slideshow 12s linear 4s infinite;-ms-animation: slideshow 12s linear 4s infinite;-o-animation: slideshow 12s linear 4s infinite;animation: slideshow 12s linear 4s infinite;} 
.wavsplashslide:nth-child(3) {-webkit-animation: slideshow 12s linear 8s infinite;-moz-animation: slideshow 12s linear 8s infinite;-ms-animation: slideshow 12s linear 8s infinite;-o-animation: slideshow 12s linear 8s infinite;animation: slideshow 12s linear 8s infinite;} 

@-webkit-keyframes slideshow {25% { opacity: 1; left: 0;} 33.33% { opacity: 0;left: -824px;} 91.66% { opacity: 0;left: -824px;} 100% { opacity: 1; left: 0}} 
@-moz-keyframes slideshow {25% { opacity: 1; left: 0;} 33.33% { opacity: 0;left: -824px;} 91.66% { opacity: 0;left: -824px;} 100% { opacity: 1; left: 0}} 
@-ms-keyframes slideshow {25% { opacity: 1; left: 0;} 33.33% { opacity: 0;left: -824px;} 91.66% { opacity: 0;left: -824px;} 100% { opacity: 1; left: 0}} 
@-o-keyframes slideshow {25% { opacity: 1; left: 0;} 33.33% { opacity: 0;left: -824px;} 91.66% { opacity: 0;left: -824px;} 100% { opacity: 1; left: 0}} 
@keyframes slideshow {25% { opacity: 1; left: 0;} 33.33% { opacity: 0;left: -824px;} 91.66% { opacity: 0;left: -824px;} 100% { opacity: 1; left: 0}} 




<div class="wavsplashslider"> 

<div class="wavsplashslide"> 
<a href="http://stackoverflow.com"> 
<img src="http://lorempixel.com/824/392" /> 
</a> 
</div> 


<div class="wavsplashslide"> 
<a href="http://stackoverflow.com/questions"> 
<img src="http://lorempixel.com/824/392" /> 
</a> 
</div> 

<div class="wavsplashslide"> 
<a href="http://stackoverflow.com/tags"> 
<img src="http://lorempixel.com/824/392" /> 
</a> 
</div> 
</div> 

Answer 1

您的课堂.wavsplashslide {}没有宽度或高度。如果您注意到滑块左上角有一个小的可点击框。设置一个合适的宽度和高度，它应该工作。此外，请删除z-index属性，因为它会导致父元素具有较高的图层优先级并覆盖.wavsplashslide {}。

.wavsplashslide {position: absolute; top: 0; left: 0; height: 392px; width: 1170px; ...animations}