为什么 CSS 可见性不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4929310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why isn't CSS visibility working?
提问by Yves
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.
我在 CSS 中添加了一个“剧透”类，用于剧透。文本通常是不可见的，但当鼠标悬停在它上面时就会出现，以向任何想要阅读它的人展示剧透。
.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?
应该很简单，但由于某种原因，这不起作用。即使我将鼠标指向它，文本仍然不可见。知道是什么原因造成的吗？
回答by Ates Goral
You cannot hover over a hidden element. One solution is to nest the element inside another container:
您不能将鼠标悬停在隐藏元素上。一种解决方案是将元素嵌套在另一个容器中：
CSS:
CSS：
.spoiler span {
visibility: hidden;
}
.spoiler:hover span {
visibility: visible;
}
HTML:
HTML：
Spoiler: <span class="spoiler"><span>E.T. phones home.</span></span>
Demo:
演示：
Update
更新
On Chrome, the following can be added:
在 Chrome 上，可以添加以下内容：
.spoiler {
outline: 1px solid transparent;
}
Updated demo: http://jsfiddle.net/DBXuv/148/
回答by Jon Ander
It works not only for text
它不仅适用于文本
.spoiler {
opacity:0;
}
.spoiler:hover {
opacity:1;
-webkit-transition: opacity .25s ease-in-out .0s;
transition: opacity .25s ease-in-out .0s;
}
回答by leonbloy
When the text is invisible, it practically does not occupy space, so it's practically imposible to trigger an hover event.
当文本不可见时，它实际上不占用空间，因此几乎不可能触发悬停事件。
You should try another approach, for example, changing the font color:
您应该尝试另一种方法，例如，更改字体颜色：
.spoiler{
color:white;
}
.spoiler:hover {
color:black;
}
回答by Yzmir Ramirez
:hoverpseudo class is only for atags according to the CSS spec. User agents are not required to support :hoverfor non-anchor tags according to the spec.
:hover伪类仅用于a根据 CSS 规范的标签。根据规范，用户代理不需要支持:hover非锚标签。
If you want to use CSS to make visible your spoiler text you will need to place <a>tags around your spoiler content. This of course will mean that the mouse would turn into a pointer, but you can suppress this by adding cursor: none;.
如果您想使用 CSS 使剧透文本可见，则需要<a>在剧透内容周围放置标签。这当然意味着鼠标会变成指针，但您可以通过添加cursor: none;.
回答by Chetan bane
If it's not working the try
如果它不起作用，请尝试
.spoiler span {
visibility: hidden;
line-height:20px;
}
.spoiler:hover span {
visibility: visible;
line-height:20px;
}回答by Nothingman
Try
尝试
.spoiler{
display:none;
}
.spoiler:hover {
display:block;
}
