Question

我知道如何使用鼠标悬停在CSS中显示图像上的叠加层。我知道如何在JS中切换div

现在我想要的是通过点击图像本身来显示图像上的叠加层。我担心悬停可能会有点干扰。

this is where I went to far

有什么想法吗？

我也尝试过全屏覆盖，但这对于回应来说并不容易

由于

Answer 1

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;
}

单击以在图像上触发叠加

1 个答案: