我知道如何使用鼠标悬停在CSS中显示图像上的叠加层。我知道如何在JS中切换div
现在我想要的是通过点击图像本身来显示图像上的叠加层。我担心悬停可能会有点干扰。
有什么想法吗?
我也尝试过全屏覆盖,但这对于回应来说并不容易
由于
答案 0 :(得分:0)
JQuery是最好的解决方案,但您也可以仅使用JavaScript解决问题。
首先,由于你想在点击时触发它,你应该摆脱CSS中的悬停属性。目前您有以下悬停:
.photo-img:hover .photo-caption {
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
left: 0;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10%;
background-repeat: no-repeat;
background-position: center center;
}
将其更改为名为“photo-caption-show”的自定义类,以便我们在点击时切换到此类:
.photo-caption-show {
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
left: 0;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10%;
background-repeat: no-repeat;
background-position: center center;
}
现在,您需要编写一个函数以在单击时切换此类。在JavaScript中编写以下函数:
var toggleShow = function(){
var element = document.querySelector(".photo-caption");
element.classList.toggle("photo-caption-show");
}
上面的函数基本上获取带有类照片标题的DOM元素,并切换其类。
现在唯一剩下的就是触发这个方法。你可以通过你想要的div来完成它,在这种情况下div是一个类a-post:
<div class="a-post" onclick="toggleShow()">
如果要将此方法分配给具有类特定类的每个元素,而不是对每个元素编写onclick,您仍然可以使用JavaScript执行以下操作,但是,JQuery是实现它的最佳方法。在定义了toggleClass函数后,输入以下代码。
var elements= document.getElementsByClassName("a-post");
for(var i = 0; i < elements.length; i++) {
var element= elements[i];
element.onclick = toggleClass;
}