Question

目前我有一组带有div的链接。我希望div在mouseover上消失，允许后面的链接可以点击。

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

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

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

1 个答案: