Question

我不相信纯CSS可以实现这一点，但我想确认一下。

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

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

这可以在没有JavaScript的情况下实现吗？

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

我认为你想要display：none或visibility：hidden，除非我过分夸大事物。

Answer 2

为了以防万一，我会暂时保持这种状态，但我不相信我只需要用CSS就可以实现。

我的解决方案是：

在getBoundingClientRect

.box

将事件处理程序绑定到窗口的mousemove事件。
将其限制为穿孔。
检查鼠标的坐标并确定它们是否超过.box并根据需要设置状态。

这很丑，但它会的！

Answer 3

到目前为止看到的答案和评论，我是否相信OP想要这样的东西？

＆＃13;

html,
body {
  margin: 0;
}
.container {
  height: 250px;
  width: 500px;
  background-color: red;
}
.container:hover {
  background-color: aqua;
}
.behind {
  height: 200px;
  width: 200px;
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}
.box {
  height: 200px;
  width: 200px;
  background-color: green;
  position: absolute;
  left: 0;
  top: 0;
}
.behind:hover .box{
  opacity: 0;
  pointer-events: none;
}

＆＃13;

<div class='container'>
   <div class='behind'>
     <ul>
       <li>Massively long text blah blah blah blah blah blah blah blah</li>
       <li>Massively long text 2 blah blah blah blah blah blah blah blah</li>
     </ul>
     <div class='box'>
     </div>
   </div>
</div>

＆＃13;

唯一的问题是指针事件不是直接在.container div上，但是点击应该从.behind div冒出来，除非你想隐藏.box下面的按钮1}} div，在这种情况下你可以将按钮放在.behind div上，如果那就足够了？如果有更多关于OP在.container div中想要什么的信息以及需要在其上触发哪些鼠标事件，这将有所帮助。

隐藏一个悬停的元素，直到用纯CSS输出鼠标？

3 个答案: