javascript - 制作一个专注于 css 和有限 Javascript 的弹出图像

Question

我一直在寻找一种使用有限的 javascript 制作弹出图像的方法。我找到了仅 css 的解决方案，但“悬停”和“事件”在此设置中不起作用。我需要一个“onclick”解决方案，但任务更侧重于 css。

我需要完成的结果看起来尽可能像这样，但带有 onlick 且未激活。

html:

<div id="thumbwrap">
<a class="thumb"><img src="telefon.png" style="height: 200px;
width: 126px;" alt="Hvordan ringe" onclick="myFunction()"><span>
<img src="telefon.png" style="height: 500px; width: 315px;" alt="">
</span></a>
</div>

CSS:

#thumbwrap {
position: relative;
margin: 75px;
}

.thumb img { 
border: 1px solid #000;
margin: 3px;
float: left;
height: 400px;
width: 250px;
}

.thumb span { 
position: absolute;
visibility: hidden;
margin-left: -100px;
}

.thumb:active, .thumb:active span { 
visibility: visible;
top: 0;
left: 250px; 
z-index: 1;
}

Answer 1

您的事件选择器需要像这样。

.thumb img:active { 
border: 1px solid #000;
margin: 3px;
float: left;
height: 400px;
width: 250px;