扫码关注官方订阅号
我有一个图像覆盖了一个对象。我希望单击并隐藏它,显示对象(360 度虚拟游览),然后如果单击虚拟游览,则显示完全相同的图像。
我不确定您想要什么隐藏行为,但如果页面中应保留空间,您可以切换可见性属性。
您可以使用事件侦听器而不是内联 JavaScript 来完成此操作。另请注意,对象没有单击事件,因此我们将其放在包装器上并禁用对象上的单击事件。请参阅如何将点击事件绑定到对象标记?。
document.querySelector('.img-thumb').addEventListener('click', event => { event.currentTarget.style.visibility = 'hidden'; document.querySelector('.obj-wrapper').style.visibility = 'visible'; }); document.querySelector('.obj-wrapper').addEventListener('click', event => { event.currentTarget.style.visibility = 'hidden'; document.querySelector('.img-thumb').style.visibility = 'visible'; });
.img-thumb { position: absolute; opacity: ; left: 0%; top: 0%; width: 100%; height: 400px; margin-left: 0px; margin-top: 0px; z-index: 100; } .obj-wrapper { visibility: hidden; } .obj-wrapper object { pointer-events: none; }
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
我不确定您想要什么隐藏行为,但如果页面中应保留空间,您可以切换可见性属性。
您可以使用事件侦听器而不是内联 JavaScript 来完成此操作。另请注意,对象没有单击事件,因此我们将其放在包装器上并禁用对象上的单击事件。请参阅如何将点击事件绑定到对象标记?。
document.querySelector('.img-thumb').addEventListener('click', event => { event.currentTarget.style.visibility = 'hidden'; document.querySelector('.obj-wrapper').style.visibility = 'visible'; }); document.querySelector('.obj-wrapper').addEventListener('click', event => { event.currentTarget.style.visibility = 'hidden'; document.querySelector('.img-thumb').style.visibility = 'visible'; });.img-thumb { position: absolute; opacity: ; left: 0%; top: 0%; width: 100%; height: 400px; margin-left: 0px; margin-top: 0px; z-index: 100; } .obj-wrapper { visibility: hidden; } .obj-wrapper object { pointer-events: none; }