css 幻灯片中的链接

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 包裹图像并将 class 照片添加到链接。从图像中删除 class 张照片。试试看:)

Answer 2

尝试：

将所有图像包裹在 <a> 标签中，每个标签带有 "photolink" class 或您想要的任何名称。

#slideshow a.photolink { display: block; }

尝试将 .photo 中的 "position: absolute" 更改为 "position: relative".

css 幻灯片中的链接

Links in css slideshow

html

css

hyperlink

slideshow