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

Question

我在CSS中添加了一个"剧透"类,用于破坏者.文本通常是不可见的,但是当鼠标悬停在文本上时,文本会显示给任何想要阅读它的人.

.spoiler{
    visibility:hidden;

}
.spoiler:hover {
    visibility:visible;
}

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

Answer 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/

Answer 2

它不仅适用于文本

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