css - 一致地在元素上注册悬停，即使元素被隐藏

Question

我很确定我可以使用 JS 或 jQuery 做到这一点，但我想知道如何使用 CSS 做到这一点。

我有一个元素，我希望在鼠标悬停时隐藏它。问题是，每当鼠标悬停在元素上时，该元素就会被隐藏(到目前为止还不错)但是如果鼠标随后移动到该元素上，它似乎不会在隐藏元素上注册悬停，因此不会隐藏它，随后通过注册悬停并隐藏它。这导致令人讨厌的元素闪烁。可以看出here

例如，here ，我在悬停时更改背景颜色，效果始终如一。如果我尝试

Answer 1

问题是，当一个元素具有 visiblity:hidden 时，您不能再“触摸”它。所以它不在那里。所以，隐藏后就没有什么可以悬停的了。因此，当您移动光标时，它会再次变得可见并立即不可见(因为您在悬停时设置的 css 样式)因此出现了闪烁问题

您可以在悬停时使用 opacity:0，该元素将在那里，您可以“触摸”它但不可见

这就是可见性和不透明度的区别

a {

    color: white;
    background-color: purple;
    padding: 0.2em 0.6em;
    display:block;
}

a:hover {
opacity:0;    }

<a> Hover here </a>