为什么我不能将鼠标悬停在隐藏元素上：CSS 可见性难题？

隐藏元素故障排除：CSS 可见性困境

为了追求剧透隐藏能力，您已经实现了一个“剧透”类，利用CSS 可见性属性。然而，您的努力遇到了意想不到的障碍：悬停时扰流板仍然隐藏。让我们深入研究这个问题并找到解决方案。

悬停不可见性的挑战

CSS 可见性属性，如您所愿，使元素隐藏。然而，出现了一个重要的警告：一旦元素被隐藏，它就会进入无法接收任何输入（包括悬停事件）的状态。这造成了一个困境，因为将鼠标悬停在隐藏元素上恰恰会触发剧透。

创造性的解决方案：嵌套元素

为了克服这个障碍，我们将采用巧妙的嵌套技术。通过将剧透文本放置在嵌套的 中，元素，我们可以选择性地定位和切换其可见性，同时保持外部容器上的悬停交互。

更新了 CSS 和 HTML 结构

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

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

演示和特定于 Chrome 的改进

在此处查看现场演示： http://jsfiddle.net/DBXuv/。您会注意到悬停时会出现剧透文本。

对于 Chrome 用户，额外的 CSS 规则可以增强可访问性：

.spoiler {
    outline: 1px solid transparent;
}

此轮廓添加了隐藏元素的微妙视觉指示存在，让用户更容易发现剧透内容。

通过 Chrome 改进更新了演示： http://jsfiddle.net/DBXuv/148/.

以上是为什么我不能将鼠标悬停在隐藏元素上：CSS 可见性难题？的详细内容。更多信息请关注PHP中文网其他相关文章！