html - 使用纯 CSS 隐藏悬停元素直到鼠标移出？

Question

我不相信这对于纯 CSS 是可能的，但我想确认一下。

我有两个元素。一个在另一个之上。当用户将鼠标悬停在顶部元素上时，我想隐藏它并允许指针事件传递到底部元素。当用户停止悬停时，我想重新显示该元素。

我在下面生成了一个示例，但它闪烁。这显然是因为 :hover 效果会在每次鼠标因指针事件而移动时打开/关闭:无。

没有 JavaScript 可以实现吗？

html,
body {
  margin: 0;
}
.container {
  height: 500px;
  width: 500px;
  background-color: red;
}
.container:hover {
  background-color: blue;
}
.box {
  height: 200px;
  width: 200px;
  background-color: green;
  position: absolute;
  left: 0;
  top: 0;
}
.box:hover {
  opacity: 0;
}

<div class='container'>
</div>
<div class='box'>
</div>

Answer 1

我想你想要显示:无或可见性:隐藏，除非我把事情过于简单化了。