html - 想要在鼠标悬停时隐藏 ，同时允许后面的链接处于事件状态

Question

目前我有一组链接，上面有一个 div。我希望 div 在鼠标悬停时消失，从而允许点击后面的链接。

:hover {display: none}

覆盖的 div 在创建循环时会产生闪烁效果，所以我不能那样做。

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

也不起作用，因为 div 仍然覆盖链接。我认为添加一个

:hover {pointer-events:none;}

可以工作，但也会产生闪烁循环。

当我将鼠标悬停在它上面时，我基本上希望 div 不在那里，但是让它不在那里会导致 :hover 命令无法读取它在那里，让它回来(......并且闪烁开始)

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

fiddle :https://jsfiddle.net/zqsn2fym/