如何解决具有链接和目标的CSS横幅滑块
我目前正在测试图片横幅滑块。看起来不错。但是,当单击每个图像时,它们都转到相同的链接(最后一个)。另外,我试图使每个链接都在_blank目标中打开,但无法正常工作。这是代码:
.slider {
width: 728px;
height: 90px;
overflow: hidden;
position: relative;
box-sizing: border-box;
white-space: nowrap;
}
.slider>div {
position: absolute;
animation: move_slide2 30s infinite;
opacity: 0;
}
.slider>div:nth-child(1) {
animation-delay: 0;
}
.slider>div:nth-child(2) {
animation-delay: 6s;
}
.slider>div:nth-child(3) {
animation-delay: 12s;
}
.slider>div:nth-child(4) {
animation-delay: 18s;
}
.slider>div:nth-child(5) {
animation-delay: 24s;
}
@keyframes move_slide {
10% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0
}
}
@keyframes move_slide2 {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
<div class="slider">
<div>
<a href="https://www.nossaseguros.ao/pt/nossa-seguros/noticias/campanha-de-divulgacao-do-produto-automovel" target="_blank">
<img src="https://placehold.it/728x90?text=1" />
</a>
</div>
<div>
<a href="https://bancobai.ao/en/companies/products-and-services/e-kwanza-bai-1" target="_blank">
<img src="https://placehold.it/728x90?text=2" />
</a>
</div>
<div>
<a href="https://www.caixaangola.ao/inicio/particulares/solucoes.poupancas/dp-antecipa/" target="_blank">
<img src="https://placehold.it/728x90?text=3" />
</a>
</div>
<div>
<a href="https://www.caixaangola.ao/inicio/particulares/solucoes.poupancas/dp-antecipa/" target="_blank">
<img src="https://placehold.it/728x90?text=4" />
</a>
</div>
<div>
<a href="https://www.caixaangola.ao/inicio/particulares/solucoes.poupancas/dp-antecipa/" target="_blank">
<img src="https://placehold.it/728x90?text=5" />
</a>
</div>
</div>
解决方法
默认情况下,您可以将指针事件更改为无,然后在不透明度为1时,将指针事件更改回自动,这将使显示的链接可点击:
.slider {
width: 728px;
height: 90px;
overflow: hidden;
position: relative;
box-sizing: border-box;
white-space: nowrap;
}
.slider>div {
position: absolute;
animation: move_slide2 30s infinite;
opacity: 0;
pointer-events: none;
}
.slider>div:nth-child(1) {
animation-delay: 0;
}
.slider>div:nth-child(2) {
animation-delay: 6s;
}
.slider>div:nth-child(3) {
animation-delay: 12s;
}
.slider>div:nth-child(4) {
animation-delay: 18s;
}
.slider>div:nth-child(5) {
animation-delay: 24s;
}
@keyframes move_slide2 {
25% {
opacity: 1;
pointer-events: auto;
}
40% {
opacity: 0;
pointer-events: none;
}
}
<div class="slider">
<div>
<a href="https://www.nossaseguros.ao/pt/nossa-seguros/noticias/campanha-de-divulgacao-do-produto-automovel" target="_blank">
<img src="https://placehold.it/728x90?text=1" />
</a>
</div>
<div>
<a href="https://bancobai.ao/en/companies/products-and-services/e-kwanza-bai-1" target="_blank">
<img src="https://placehold.it/728x90?text=2" />
</a>
</div>
<div>
<a href="https://www.caixaangola.ao/inicio/particulares/solucoes.poupancas/dp-antecipa/" target="_blank">
<img src="https://placehold.it/728x90?text=3" />
</a>
</div>
<div>
<a href="https://www.caixaangola.ao/inicio/particulares/solucoes.poupancas/dp-antecipa/" target="_blank">
<img src="https://placehold.it/728x90?text=4" />
</a>
</div>
<div>
<a href="https://www.caixaangola.ao/inicio/particulares/solucoes.poupancas/dp-antecipa/" target="_blank">
<img src="https://placehold.it/728x90?text=5" />
</a>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。