我有一个 CSS 轮播，由于这里有一个很棒的编码器，它运行得很好，但是当我完成我的项目时，我无法使幻灯片中的图像或文本可点击。我已经包裹了img，我已经将它连接到文本，我不能点击任何东西，它只是以它快乐的方式滑动。下面是代码：
.colorDissolve {
position: relative;
overflow: hidden;
width: 287px;
height: 430px;
background: #000000;
}
.colorDissolve .item {
position: absolute;
left: 0;
right: 0;
opacity: 0;
-webkit-animation: colorDissolve 24s linear infinite;
-moz-animation: colorDissolve 24s linear infinite;
-ms-animation: colorDissolve 24s linear infinite;
animation: colorDissolve 24s linear infinite;
}
.colorDissolve .item:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.colorDissolve .item:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.colorDissolve .item:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.stars{
height: 220px;
background-color: rgba(11, 11, 44, 0.6);
position: absolute;
margin-left: 120px;
margin-top: -135px;
top:200px;
bottom:200px;
right:100px;
left:220px;
bottom: 143px;
color: #8df4fb;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.space{
position:absolute;
top:100px;
bottom:100px;
left:390px;
color:#c30;
font-size:.9em;
padding:0.5em;
position:absolute;
right:10px;
left:10px;
text-align:right;
color:#fff;
background-color:rgba(0,0,0,0.75);
}
@-webkit-keyframes colorDissolve {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
@-moz-keyframes colorDissolve {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
@-ms-keyframes colorDissolve {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
@keyframes colorDissolve {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
<div class="carousel colorDissolve">
<div class="item">
<a href="star.html">
<img src="images/stars.gif" />
</a>
<span class="stars">
<h2>Science</h2>
<p>TEXT</p>
<h2>The new Style of Space</h2>
</span>
</div>
<div class="item">
<a href="space.html">
<img src="images/galaxy.gif" />
</a>
<span class="space">
<h2>Science</h2>
<p>TEXT</p>
<h2>The new Style of Space</h2>
</span>
</div>
<div class="item">
<a href="moon.html">
<img src="images/moons.gif" />
</a>
<span class="space">
<h2>Science</h2>
<p>TEXT</p>
<h2>The new Style of Space</h2>
</span>
</div>
<div class="item">
<a href="nebula.html">
<img src="images/nebulae.gif" />
</a>
<span class="space">
<h2>Science</h2>
<p>TEXT</p>
<h2>The new Style of Space</h2>
</span>
</div>
</div>
我还将链接代码放在标题周围的文本中，并且没有链接选项。我尝试了 z-index，但它仍然不起作用，而且我认为它不应该高于我的导航链接，对吧？也许我的导航链接以某种方式弄乱了我的 img 链接？我不确定我错过了什么，我也将跨度部分放入了，但我无法让它工作。我也有 facebook 和 twitter 的链接，但它们不会干扰任何事情。我只是有点卡在这里。我就是无法解决这个问题。
编辑：好的，所以我现在有了适用于文本的链接，我能够做的是使用 z-index 将链接的文本放在 div 层的顶部，我现在可以点击这些链接，因为它们存在。我显然使 z-index 比率高于页脚中的链接，而且效果很好。我仍然存在的唯一问题是让整个幻灯片本身或只是图片本身链接或可点击，因为它从另一个 div 层拉出，当我将鼠标悬停在图片上时基本上使用我的 ul 属性，这是不是我想要它做的。