为什么CSS可见性不起作用？

Question

我在CSS中添加了一个“扰流器”类，用于扰流器。文本通常是不可见的，但是当鼠标悬停在其上方以向想要阅读该文本的任何人显示扰流板时，该文本就会出现。

.spoiler{
    visibility:hidden;

}
.spoiler:hover {
    visibility:visible;
}

应该很简单，但是由于某种原因这是行不通的。即使我将鼠标指向文字，文字仍然不可见。知道是什么原因造成的吗？

Answer 1

您不能将鼠标悬停在隐藏的元素上。一种解决方案是将元素嵌套在另一个容器中：

CSS：

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML：

Spoiler: <span class="spoiler"><span>E.T. phones home.</span></span>

更新资料

在Chrome上，可以添加以下内容：

.spoiler {
    outline: 1px solid transparent;
}