如何创建剧透文本？

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>

Answer 1

该<details>HTML标签被用于此目的而设计的。这是MDN文档中的示例。不幸的是，截至2019年1月，IE和Edge不支持此标签。

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

Answer 2

.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>

Answer 3

类似于Disqus评论中的剧透。

.spoiler{
  background-color: gray;
  color: transparent;
  user-select: none;
}

.spoiler:hover{
  background-color: inherit;
  color: inherit;
}

<h3>In the movie, <span class="spoiler">the hero kills his wife.</span></h3>