为什么我的 CSS 可见性不适用于悬停的隐藏元素？

CSS 可见性不起作用：故障排除和解决方案

CSS 中的“spoiler”类旨在在鼠标悬停时显示隐藏文本，但由于某种原因，文本仍然不可见。为了解决这个问题，我们需要理解为什么可见性在这种情况下不起作用。

出现这个问题是因为您无法将鼠标悬停在隐藏元素上。当可见性设置为隐藏时，元素及其内容实际上对鼠标事件不可见，包括鼠标悬停。

要解决此问题，一种解决方案是将隐藏元素嵌套在另一个容器元素中。这将允许将鼠标悬停在外部容器上，从而触发嵌套元素的可见性更改：

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;
}

此更新的代码允许通过将鼠标悬停在上方来更轻松地切换可见性隐藏元素的轮廓。

以上是为什么我的 CSS 可见性不适用于悬停的隐藏元素？的详细内容。更多信息请关注PHP中文网其他相关文章！