想要在鼠标悬停时隐藏 <div>，同时允许后面的链接处于活动状态

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/

想要在鼠标悬停时隐藏 <div>，同时允许后面的链接处于活动状态

Want to hide <div> on mouse-over, whilst allowing links behind to be active

html

css

hover