为什么 CSS 可见性不起作用？答案

【问题标题】：Why isn't CSS visibility working?为什么 CSS 可见性不起作用？
【发布时间】：2011-06-23 04:38:09
【问题描述】：

我在 CSS 中添加了一个“剧透”类，用于剧透。文本通常是不可见的，但当鼠标悬停在文本上时就会出现，以便向想要阅读它的人展示剧透。

.spoiler{
    visibility:hidden;

}
.spoiler:hover {
    visibility:visible;
}

应该很简单，但由于某种原因这不起作用。即使我将鼠标指向文本，文本仍然不可见。知道是什么原因造成的吗？

【问题讨论】：

标签： css visibility

【解决方案1】：

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

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 上，可以添加以下内容：

.spoiler {
    outline: 1px solid transparent;
}

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

【讨论】：

@Yzmir Ramirez：这只是概念的演示。根据目标浏览器，可以选择更合适的容器，例如虚拟<a>。
我知道它必须在那里。没有失望。谢谢
@tostinni - 令人讨厌的 chrome 错误，从外观上看：你可以通过添加 .spoiler {outline:1px solid transparent;} 或几乎任何可以使元素“渲染”的东西来避免它，即使所有渲染的像素碰巧都是透明的。
感谢@EamonNerbonne。更新：jsfiddle.net/DBXuv/148（顺便说一句，哇。人们已经为此做了 147 次实验。）
请注意，visibility 在某些情况下可能呈现不佳。特别是，如果您有多个具有隐藏内容的 div，并且此内容包含图像，当您将鼠标悬停在一个 div 时，另一个新显示的 div 可能会比前一个 div 的图像消失得更快（在多个浏览器上测试）。在这种情况下，以下 Jon Ander 的解决方案似乎更有效。

【解决方案2】：

它不仅适用于文本

.spoiler {
    opacity:0;
}
.spoiler:hover {
    opacity:1;
    -webkit-transition: opacity .25s ease-in-out .0s;
    transition: opacity .25s ease-in-out .0s;
}

【讨论】：

简洁的解决方案。与其他答案相反（除了接受的答案，它有一些缺点，请参阅 cmets），它不仅适用于文本，也适用于其他任何东西。
不错。也适用于position: absolute。

【解决方案3】：

当文本不可见时，它实际上不占用空间，因此几乎不可能触发悬停事件。

您应该尝试另一种方法，例如更改字体颜色：

.spoiler{
    color:white;

}
.spoiler:hover {
    color:black;
}

【讨论】：

可见性属性确实占用空间，显示属性不占用空间。
这不是phpBB实现他们[spoiler]标签的方式吗？

【解决方案4】：

:hover 伪类仅适用于根据 CSS 规范的 a 标签。对于非锚标签according to the spec，用户代理不需要支持:hover。

如果您想使用 CSS 使剧透文本可见，则需要在剧透内容周围放置 <a> 标签。这当然意味着鼠标会变成一个指针，但是你可以通过添加cursor: none;来抑制它。

【讨论】：

我刚刚看到您对我的回答的评论。是的，@Ates Goral 是正确的。顺便说一句，这实际上是多少个 CSS 菜单。
:hover 对所有元素都有效。根据您链接的规范，一些用户代理可能无法处理它，但它没有提及特定元素：hover 可以使用或不使用。
该规范的含义可能是触摸屏之类的东西，其中悬停的概念充其量是可疑的。

【解决方案5】：

如果它不起作用，请尝试

.spoiler span {
    visibility: hidden;
    line-height:20px;
}

.spoiler:hover span {
    visibility: visible;
    line-height:20px;
}

【讨论】：

【解决方案6】：

试试

.spoiler{
    display:none;

}
.spoiler:hover {
    display:block;
}

【讨论】：

这将类似于最初问题中的问题（因为您不能将鼠标悬停在扰流块上），除了稍微更糟，因为display:none元素根本不占用盒子模型中的任何空间，所以绝对永远不能悬停在上面。