1

我有一个 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 属性，这是不是我想要它做的。

4

1 回答 1

0

这很奇怪，对我来说它工作正常（只是你忘记了<你的项目 div 的第一个标签）

  • 如果你想要一个可点击的整个 div => 更改<div class="item">为<a class="item">
  • 如果你想在 div => 里面有一个可点击的图片，在 img 周围加上一个标签
  • 如果你想在 div => 内有一个可点击的文本，请环绕一个标签<span class="space">

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

编辑：啊，我现在得到你了。我用一个函数重新测试了代码，当点击它时会提醒链接的href。经过一番搜索，事实证明，你必须position: absolute;从你的课程中废弃.space（两次！） & .item。http://jsbin.com/apuwal/7/edit

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

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

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

于 2013-05-11T15:01:05.923 回答