嗨，我有一个纯CSS轮播灯箱，可以正常工作。
但是，我想做三件事：
- 当我按ESC时，它会模拟单击关闭按钮；
- 当左右按时，它模拟单击左/右按钮；并且，
- 当我单击图像时，灯箱关闭。
理想情况下，如果可以在纯CSS中完成，那就太好了。
否则，愿意接受jquery。
这里是fiddle。
.lightbox__slide img {
position: absolute;
z-index: 30;
max-width: 90%;
max-height: 80%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation-name: hide;
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-direction: linear;
animation-fill-mode: forwards;
}
.lightbox__slide:target .btn { display: block; }
.lightbox__slide:target img {
opacity: 0;
animation-name: show;
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-direction: linear;
animation-fill-mode: forwards;
}
.lightbox__slide:target ~ .lightbox__bg {
position: relative;
background:white;
opacity: 0.6;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
@-webkit-keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; } }
.btn {
position: absolute;
z-index: 20;
display: none;
transition: all 0.2s;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
text-align: center;
line-height: 40px;
text-decoration: none;
color:black;
}
.btn:hover {background: rgba(255,255,0.8);}
.btn--close { top: 40px; right: 20px; }
.btn--close:after { content: '\2715'; }
.btn--left { top: 50%; left: 40px; }
.btn--left:after { content: '⯇'; }
.btn--right { top: 50%; right: 20px; }
.btn--right:after { content: '⯈'; }<span class="feature_category active" id="A">
<div class="feature_box_wrapper"><a href="#groys1">Link</a></div>
<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line
<div class="feature_box_wrapper"><a href="#groys2">Link</a></div>
<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line
<div class="feature_box_wrapper"><a href="#groys3">Link</a></div>
<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line
<div class="feature_box_wrapper"><a href="#groys4">Link</a></div>
<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line
<div class="feature_box_wrapper"><a href="#groys5">Link</a></div>
<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line
</span>
<div class="lightbox">
<!-- Groys -->
<div class="lightbox__slide" id="groys1">
<a href="#_" class="btn btn--close"></a>
<a href="#groys5" class="btn btn--left"></a>
<a href="#groys2" class="btn btn--right"></a>
<img src="https://picsum.photos/seed/picsum/800/450" alt="Screenshot of your site">
</div>
<div class="lightbox__slide" id="groys2">
<a href="#_" class="btn btn--close"></a>
<a href="#groys1" class="btn btn--left"></a>
<a href="#groys3" class="btn btn--right"></a>
<img src="https://picsum.photos/seed/picsum/800/450" alt="Screenshot of your site">
</div>
<div class="lightbox__slide" id="groys3">
<a href="#_" class="btn btn--close"></a>
<a href="#groys2" class="btn btn--left"></a>
<a href="#groys4" class="btn btn--right"></a>
<img src="https://picsum.photos/seed/picsum/800/450" alt="Screenshot of your site">
</div>
<div class="lightbox__slide" id="groys4">
<a href="#_" class="btn btn--close"></a>
<a href="#groys3" class="btn btn--left"></a>
<a href="#groys5" class="btn btn--right"></a>
<img src="https://picsum.photos/seed/picsum/800/450" alt="Screenshot of your site">
</div>
<div class="lightbox__slide" id="groys5">
<a href="#_" class="btn btn--close"></a>
<a href="#groys4" class="btn btn--left"></a>
<a href="#groys1" class="btn btn--right"></a>
<img src="https://picsum.photos/seed/picsum/800/450" alt="Screenshot of your site">
</div>
<div class="lightbox__bg"></div><!-- Close -->
</div><!-- Close Lightbox -->