如何创建剧透文本？

Question

您好，我想知道如何使用 html/css 在网站上制作剧透文本。我是，黑色背景的黑色文本，但是当悬停在上面时，黑色文本变成白色，使其可见。

像这样

 <span style="color: black; background: black;">test</span>

<p>Then when hovered over</p>

<span style="color: white; background: black;">test</span>

原文由 Alexwall 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

 .spoiler, .spoiler2{
  color: black;
  background-color:black;
}

.spoiler:hover{
  color: white;
  }

.spoiler2:hover {
  background-color:white;
  }

 <span class="spoiler" >test</span>

<p>Then when hovered over</p>

<span class="spoiler2"> other test </span>

原文由 corn3lius 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

<details> HTML 标签专为此目的而设计。这是来自 MDN 文档 的示例。不幸的是，截至 2019 年 1 月，IE 和 edge 不支持此标签。

 <details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

原文由 XMB5 发布，翻译遵循 CC BY-SA 4.0 许可协议