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;
}

Answer 3

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

您应该尝试其他方法，例如，更改字体颜色：

.spoiler{
    color:white;

}
.spoiler:hover {
    color:black;
}

Answer 4

根据CSS规范，

:hover伪类仅适用于a标记。用户代理不需要支持:hover非锚标记according to the spec。

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

Answer 5

如果它没有运行试试

＆＃13;

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

＆＃13;

Answer 6

尝试

.spoiler{
    display:none;

}
.spoiler:hover {
    display:block;
}

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

6 个答案:

更新