揭开谜团：为什么 CSS 可见性在悬停时失败

CSS 可见性提供了一种操作元素可见性的便捷方法，但有时它会偶然发现意想不到的障碍。考虑这样一个场景，您定义了一个“扰流器”类来使文本最初不可见，并在鼠标悬停时显示它。尽管您有期望，文本仍然顽固地保持在隐藏状态，无视您的悬停努力。

深入探讨原因

这种令人困惑的行为背后的罪魁祸首在于大自然的隐藏元素。当使用visibility:hidden隐藏元素时，它实际上变得不可见并且不占用页面布局中的空间。这意味着尝试悬停在它上面本质上就像尝试与虚空互动一样。该元素根本不注册悬停操作。

解决可见性困境

要克服此障碍，您需要为元素提供一种保持可见的方法即使其内容被隐藏。一种方法是将元素嵌套在可以接收悬停事件的另一个容器内。实现此目的的方法如下：

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: E.T. phones home.

说明：

通过将隐藏文本嵌套在 span 元素中，可以确保外部扰流板元素保持可见，允许它捕获悬停事件。当悬停发生时，内部 span 元素变得可见，显示剧透文本。

其他注意事项

在某些浏览器（如 Chrome）中，您可能会遇到一个小问题，其中隐藏的扰流板元素仍然可以用鼠标稍微选择。为了解决这个问题，你可以给剧透元素添加一个轮廓：

.spoiler {
    outline: 1px solid transparent;
}

这个透明的轮廓确保扰流板元素有足够的大小来接收悬停事件，而不妨碍文本的整体可见性。

通过这些调整，您的扰流板类将完美地运行，保留隐藏文本的不可见性并提供无缝的悬停体验。