css 有没有一种方法可以在单击时隐藏图像,并在再次单击时显示?

xdyibdwo  于 2023-01-14  发布在  其他
关注(0)|答案(2)|浏览(126)

我有一个覆盖对象的图像。我希望被点击和隐藏,显示对象(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>
y1aodyip

y1aodyip1#

我不知道你想要什么样的隐藏行为,但是如果空间应该保留在页面中,你可以切换可见性属性。
你可以使用事件监听器而不是内联JavaScript来实现这个功能。还要注意的是,对象没有click事件,所以我们将把它放在 Package 器上,并禁用对象上的click事件。

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;
}
<img src="https://i.ibb.co/ZBkxZHW/360-overlay-white.png" class="img-thumb" />

<div class="obj-wrapper">
  <object scrolling="no" data="https://via.placeholder.com/400" width="100%" height="400" type="text/html">
</object>
</div>
4urapxun

4urapxun2#

#toggle:checked~.control-me {
  display: none;
}

label {
  background: black;
  color: white;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  left: -100vw;
}
<div>
  <label for="toggle">Click me</label>
  <input type="checkbox" id="toggle" class="visually-hidden">

  <div class="control-me">
    <object scrolling="no" data="https://via.placeholder.com/200" width="100%" height="400" type="text/html">
    </object>
  </div>
</div>

相关问题