我有一個(gè)圖像覆蓋了一個(gè)物件。我希望單擊並隱藏它，顯示物件（360 度虛擬遊覽），然後如果單擊虛擬遊覽，則顯示完全相同的圖像。
<img src="https://i.ibb.co/ZBkxZHW/360-overlay-white.png" onclick="this.style.display='none';" style="position:absolute;opacity:;left:0%;top:0%;width:100%;height:400px;margin-left:0px;margin-top:0px;z-index:100;" /> <object scrolling="no" data="https://via.placeholder.com/400" width="100%" height="400" type="text/html"> </object>
1
0
0
我不確定您想要什麼隱藏行為，但如果頁(yè)面中應(yīng)保留空間，您可以切換可見性屬性。
您可以使用事件偵聽器而不是內(nèi)嵌 JavaScript 來(lái)完成此操作。另請(qǐng)注意，物件沒(méi)有單擊事件，因此我們將其放在包裝器上並禁用物件上的單擊事件。請(qǐng)參閱如何將點(diǎn)擊事件綁定到物件標(biāo)記？ 。
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;
}
