为什么 CSS `visibility:hidden` 无法实现悬停效果？

揭开谜底：为什么 CSS 可见性无法悬停

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

深入探究原因

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

解决可见性困境

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

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

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

解释：

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

其他注意事项

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

.spoiler {
    outline: 1px solid transparent;
}

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

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

以上是为什么 CSS `visibility:hidden` 无法实现悬停效果？的详细内容。更多信息请关注PHP中文网其他相关文章！