为什么CSS可见性无法正常工作？ [英] Why isn't CSS visibility working?

问题描述

我在CSS中添加了一个spoiler类，用于，好的，破坏者。文本通常是不可见的，但是当鼠标悬停在它上面时，它会显示给想要阅读它的人。

I added a "spoiler" class in CSS to use for, well, spoilers. Text is normally invisible but appears when the mouse hovers over it to reveal the spoiler to whoever wants to read it.

.spoiler{
    visibility:hidden;

}
.spoiler:hover {
    visibility:visible;
}

应该很简单，但由于某种原因，这不起作用。即使我将鼠标指向它，文本仍然不可见。

Should be simple, but for some reason this doesn't work. The text remains invisible even when I point the mouse on it. Any idea what could be causing this?

推荐答案

不能将鼠标悬停在一个隐藏的元素上。一个解决方案是将元素嵌套在另一个容器中：

You cannot hover over a hidden element. One solution is to nest the element inside another container:

CSS：

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML：

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

演示：

http://jsfiddle.net/DBXuv/

在Chrome上，可以添加以下内容：

On Chrome, the following can be added:

.spoiler {
    outline: 1px solid transparent;
}

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

这篇关于为什么CSS可见性无法正常工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！