为什么我的悬停效果对 CSS 中具有'visibility:hidden”的元素不起作用？

可见性在 CSS 中不起作用：原因及修复方法

在 CSS 样式中，歧义有时会导致意外结果。让我们探讨一下尝试使用“可见性”属性隐藏文本时遇到的常见问题。

问题：

您的 CSS 内容如下：

.spoiler {
    visibility: hidden;
}

.spoiler:hover {
    visibility: visible;
}

根据此配置，将鼠标悬停在带有“.spoiler”类的文本上应该会显示它。但是，这种情况不会发生，无论鼠标位置如何，文本都将不可见。

原因：

问题在于隐藏元素的默认行为。在鼠标事件（包括悬停）期间，用户代理无法识别具有“可见性：隐藏”的元素。因此，悬停状态永远不会激活。

解决方案 1：嵌套元素

要克服这一挑战，可以将剧透文本嵌套在另一个元素中：

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: <span>

此解决方案有效，因为嵌套的 span 元素最初具有隐藏可见性阻止鼠标事件。但是，当“.spoiler”父元素收到悬停事件时，它会激活并显示 span 元素，使文本可见。

解决方案 2（仅限 Chrome）：大纲技巧

Chrome 的另一种方法是向 '.spoiler' 元素添加轮廓：

.spoiler {
    outline: 1px solid transparent;
}

此技术创建一个响应鼠标事件的不可见的碰撞盒，从而允许悬停效果正常运行关于隐藏元素。

以上是为什么我的悬停效果对 CSS 中具有'visibility:hidden”的元素不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！