Html 如何创建扰流板文本？

你好，我想知道如何用html/css在网站上制作扰流板文本。我的意思是，文本是黑色的，背景是黑色的，但当鼠标悬停在上面时，会使黑色文本变成白色，使其可见

像这样

测试
然后当它在上空盘旋时

测试

.spoiler、.spoiler2{
颜色：黑色；
背景色：黑色；
}
.扰流板：悬停{
颜色：白色；
}
.2：悬停{
背景色：白色；
}

测试
然后当它在上空盘旋时

其他测试

HTML标记是专门为此设计的。下面是来自的示例。不幸的是，IE和edge截至2019年1月不支持此标签。

细节
小到可以不被人注意的东西。

我在论坛（包括我自己的论坛）上一直是破坏者，这些论坛不仅仅是背景颜色改变的文本

在单击“显示/隐藏切换”按钮之前，它们会隐藏内容

我想向默认情况下不显示的站点添加一个节以节省空间

这似乎能满足我的需要

HTML

如何使用复选框作为扰流板隐藏或显示 如果您不想知道，您也可以使用复选框制作扰流板。 这也很简单。

#{
背景颜色：浅灰色；
填充物：2.5px；
可见性：隐藏；
边缘顶部：10px；
}
#扰流板ECK1：已选中#扰流板V1{
能见度：可见；
}

HTML扰流板示例
这是剧透的内容

所以像

test

？@SLaks是的，我明白了，我只是误解了答案。你也可以将

背景色

属性更改为白色，这看起来像是自2020年1月发布79版以来更常见的扰流板标签Sedge支持此标签（）。我还是不支持。做得很漂亮+1.

<div class="forum-post">
    <a href="#hide" class="hide btn" id="hide">Show spoiler</a>
    <a href="#show" class="show btn" id="show">Hide spoiler</a>
    <div class="spoiler">
      <p class="spoiler-content">People die when they are killed!</p>
    </div>
</div>

.spoiler {
  display: none;
}

.show {
  display: none; 
}

.hide:target + .show {
  display: inline; 
}

.hide:target {
  display: none; 
}

.hide:target ~ .spoiler {
  display: inline;
}

/* Just for prettiness, not actually needed */

body {
  margin: 0;
  padding: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  background-color: #ffffff;
}

.btn {
  padding: 4px 12px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  *background-color: #e6e6e6;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #bbbbbb;
  *border: 0;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #a2a2a2;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}

.forum-post {
  padding: 20px;
  border: 1px solid #000;
}

.spoiler-content {
  padding: 15px;
}