为什么我的剧透文本在悬停时不显示？

排查剧透元素的 CSS 可见性问题

使用 CSS 中的 Visibility 属性创建剧透元素时，部分用户可能会遇到以下问题：即使将鼠标悬停在文本上，文本仍然不可见。此问题可能源于以下事实：悬停需要与可见元素进行交互。

要解决此问题，一种有效的解决方案是将扰流板元素嵌套在另一个容器中。这允许容器接收悬停事件，即使扰流元素最初是隐藏的。以下更新的代码片段演示了此技术：

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: <span>

This方法确保容器元素在悬停时变得可见，从而触发内部扰流板的可见性

演示：
http://jsfiddle.net/DBXuv/

注意： 对于 Chrome 浏览器，具体如下添加可以增强功能：

.spoiler {
    outline: 1px solid transparent;
}

此添加提供了视觉提示来指示剧透的存在，即使初始文本被隐藏。

更新的演示：
http://jsfiddle.net/DBXuv/148/

以上是为什么我的剧透文本在悬停时不显示？的详细内容。更多信息请关注PHP中文网其他相关文章！