使用 css 和 js 在点击时切换图像信息

Question

我怎样才能使我的投资组合图像可点击以显示有关项目的信息并可重新点击以在第二次点击时隐藏此信息？会喜欢使用简单的 js 而不是 jquery.

查看网站，但无法通过按住点击而不是切换来工作： enter link description here

Answer 1

我仔细浏览了您的网站，这可能是您问题的解决方案。

在您的 JS 中添加以下脚本：

var imageElems = document.getElementsByClassName('image-box');

for (var i=0; i<imageElems.length; i++) {
    imageElems[i].addEventListener('click', function() {
        this.querySelector('.overlay').classList.toggle('show');
    });
 }

并在 CSS 中添加：

.overlay.show {
    opacity: 1;
}

所以基本上我在这里所做的是，我在所有带有 className: image-box 的图像上添加了一个点击事件，它会在点击时切换一个名为 show 的 class。

P.S。您应该以更好的方式提出您的问题，为您的问题提供代码示例，以便这里的人可以更好地理解您的问题。我尝试帮助您的唯一原因是因为我看到您是一名平面设计师，正在尝试编写一些代码，这足以令人鼓舞！ :)

Answer 2

不用JS也能达到效果，纯CSS.

.element {
  position: relative;
  height: 300px;
  width: 300px;
  background: red;
}

.pseudo-checkbox {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.pseudo-checkbox:checked + .description {
  display: initial;
}

.description {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="element">
  <input type="checkbox" class="pseudo-checkbox" />
  <div class="description">
    Description
  </div>
</div>

使用 css 和 js 在点击时切换图像信息

toggle information over images on click using css and js

javascript

css

overlay

toggle