gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 21:07:36 25 4
gpt4 key购买 nike

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

查看网站,但不是通过按住点击而不是切换来工作: enter link description here

最佳答案

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

在您的 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 的类。

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

关于javascript - 使用 css 和 js 在点击时切换图像信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51000332/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com