您好我想知道如何在网站上使用html / css制作扰流文本。我的是,黑色背景的黑色文字,但是当盘旋时,黑色文字变成白色,使其可见。
像这样
<span style="color: black; background: black;">test</span>
<p>Then when hovered over</p>
<span style="color: white; background: black;">test</span>
&#13;
答案 0 :(得分:7)
.spoiler, .spoiler2{
color: black;
background-color:black;
}
.spoiler:hover{
color: white;
}
.spoiler2:hover {
background-color:white;
}
&#13;
<span class="spoiler" >test</span>
<p>Then when hovered over</p>
<span class="spoiler2"> other test </span>
&#13;
答案 1 :(得分:3)
<details>
HTML标签是专门为此目的而设计的。这是MDN docs中的示例。不幸的是,截至2019年1月,IE和Edge不支持此标签。
<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>
答案 2 :(得分:1)
我一直在论坛(包括我自己的论坛)上剧透,不只是背景颜色已更改的文本。
在您单击显示/隐藏切换按钮之前,它们将隐藏内容。
我想在网站上添加一个默认不显示的部分以节省空间。
https://jsfiddle.net/clarle/bY7m4/
这似乎可以满足我的需求。
HTML
<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>
CSS
.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;
}
答案 3 :(得分:-1)
如果您不希望知道,还可以使用复选框来制作剧透。 这也很简单。
#spoilerdiv1 {
background-color: lightgray;
padding: 2.5px;
visibility: hidden;
margin-top: 10px;
}
#spoilercheck1:checked ~ #spoilerdiv1 {
visibility: visible;
}
<h1>An example HTML Spoiler</h1>
<input type="checkbox" name="spoiler-one" id="spoilercheck1">
<div id="spoilerdiv1">
<p>This is the spoiler content</p>
</div>
看起来很无聊。让我添加一些样式,至少一点都不觉得无聊。
// No JavaScript needed at all!
* {
font-family: Calibri;
}
#spoilercheck1 {
visibility: hidden;
}
#spoilerlabel1 {
color: white;
background-color: orange;
font-size: 1.25em;
padding: 5px;
cursor: pointer;
}
#spoilerlabel1:hover {
background-color: orangered;
}
#spoilerdiv1 {
background-color: lightgray;
padding: 2.5px;
height: 0;
font-size: 0;
margin-top: 10px;
transition: 500ms;
opacity: 0;
border-radius: 15px;
}
#spoilercheck1:checked ~ #spoilerdiv1 {
height: auto;
font-size: 1em;
opacity: 1;
}
<h1>Spoiler example</h1>
<input type="checkbox" name="spoiler-one" id="spoilercheck1">
<label for="spoilercheck1" id="spoilerlabel1">» Spoiler</label>
<div id="spoilerdiv1">
<p>This is the spoiler content</p>
</div>
答案 4 :(得分:-3)
这是一个例子:
int value1 = json["records"][0]["fields"]["orders1"].ToInt(); // if you want to make it a string use ToStr() instead of ToInt()