希望在鼠标上隐藏<div>，同时允许后面的链接处于活动状态。

Question

目前，我有一套链接与div对他们。我希望div消失在鼠标上方，允许后面的链接可点击。

:hover {display: none}

在覆盖上，div会产生闪烁的效果，因为它会产生一个循环，所以我不能这样做。

:hover {background-color: rgba(0,0,0,0);}

也不工作，因为div仍然是覆盖的链接。我以为增加一个

:hover {pointer-events:none;}

可以工作，但这也会创建一个闪烁的循环。

我基本上想要一个div当我鼠标在它上面的时候不存在，但是使它不存在会导致:悬浮命令没有读取它，使它返回(...and闪烁开始)

Answer 1

这应该是可行的：

:hover {
  pointer-events: none;
  visibility: hidden;
}

原因是display: none物理上删除了元素，这意味着您不再悬停它。因此，它将它添加回，现在，您正在盘旋它。所以你才会有闪烁的效果。另一方面，visibility: hidden将元素保持在正确的位置，因此您在技术上仍然会将其悬停。

我撒了谎，那根本没用。

以下是一个真正的解决方案：

HTML

<div class="container">
    <a href="#">Hello</a>

    <div class="overlay"></div>
</div>

CSS

.container {   
    width: 50px;
    height: 50px;
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: black;
}

.container:hover .overlay {
    display: none;
}

小提琴：https://jsfiddle.net/zqsn2fym/