Question

我希望幻灯片中的图片是可点击的链接，但只是在其周围放置标签不起作用：

<a href="#"><img class='photo'  src="Images/Red.jpeg" alt=""></a>

它可能与动画有关，有没有办法解决这个问题？

的CSS：

#slideshow {
  margin:50px auto;
  width:60em;
  height:18em;
  overflow:hidden;
  border:0.4em solid;
  border-color: black;
  position:relative;
}
.photo{
  position:absolute;
  animation:round 16s infinite;
  -webkit-animation: round 16s infinite;
  opacity:0;
}
@keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 
@-webkit-keyframes round {
    25%{opacity:1;}
    40%{opacity:0;}
}

img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
img:nth-child(4){-webkit-animation-delay:0s;}
img:nth-child(3){-webkit-animation-delay:4s;}
img:nth-child(2){-webkit-animation-delay:8s;}
img:nth-child(1){-webkit-animation-delay:12s;}

HTML：

<div id="slideshow">
    <img class='photo'  src="Images/Red.jpeg" alt="">
    <img class='photo'  src="Images/rose.jpeg" alt="">
    <img class='photo'  src="Images/White.jpeg" alt="">
    <img class='photo'  src="Images/rose.jpeg" alt="">      
</div>

Answer 1

使用a包装图像并将类照片添加到链接。从图像中删除课程照片。试试看：）

Answer 2

尝试：

将所有图片包裹在<a>个标签中，每个图片都带有“photolink”类或您想要的任何名称。

#slideshow a.photolink { display: block; }

尝试将。照片中的“position：absolute”更改为“position：relative”。

css幻灯片中的链接

2 个答案: