html - 无法让 CSS 轮播幻灯片 img 或其中的文本成为可点击的链接

Question

我有一个 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 链接？我不确定我错过了什么，我也把它放在了 span 部分，但我无法让它工作。我也有 facebook 和 twitter 的链接，但它们不会干扰任何东西。我只是有点困在这里。我无法解决这个问题。

编辑:好的，所以我现在有了用于文本的链接，我能够做的是使用 z-index 将链接的文本放在 div 层的顶部，我现在可以单击这些链接，因为它们存在。我显然使 z-index 比率高于页脚中的链接，并且效果很好。我仍然遇到的唯一问题是让整个幻灯片本身或图片本身链接或可以自己点击，因为它从另一个 div 层拉出，基本上是在我将鼠标悬停在图片上时使用我的 ul a 属性，这是不是我想要它做的。

Answer 1

这很奇怪，对我来说它工作正常(只是你忘记了元素 div 的第一个 < 标签)

• 如果您想要一个可点击的整个 div => 更改 <div class="item">至 <a class="item">
• 如果你想在 div 中放置一个可点击的图像 => 在 img 周围包裹一个标签
• 如果你想在 div 中添加一个可点击的文本 => 在 <span class="space"> 周围加上一个标签

如果它不起作用，您可能输入错误，因为在这个测试中: http://jsbin.com/apuwal/2/edit ，无论我在哪里包裹 anchor 标签，它都有效。

编辑:啊，我明白了。我用一个函数重新测试了代码，该函数在单击链接时提醒链接的 href。经过一番搜索，结果证明，你必须废弃 position: absolute;从你的类(class).space (两次!) & .item . http://jsbin.com/apuwal/7/edit

这是因为绝对定位会忽略其他元素的存在，因此您的元素将全部堆叠在同一位置并且只有一个链接可点击。如果您希望保持元素的绝对位置，则必须:

• 为你的元素设置不同的外边距，这样它们就不会重叠
• 使用关键帧(不知道是否可行，从未尝试过)更改不透明度 > 0.5 左右的元素的 z-index
• 将您的元素设置为 display: none;当他们完成淡出。 (通过 Javascript/jQuery)
• 在隐藏元素淡出时给它们不同的边距。

我知道 CSS slider /推子现在非常复杂，但我现在的看法是，最简单的解决方案仍然是 javascript