How to create spoiler text?

后端未结

关注

 5  2077

Hello I was wondering how to make spoiler text on a website with html/css. What I was is, text that is black with black background, but when hovered over, makes the black text

相关标签:

5条回答

孤街浪徒

2021-02-20 05:10

Here's an example:

<!DOCTYPE html>
<!--
You need to highlight the black to see the spoiler.
-->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Spoilers</title>
    <link href="https://hopefulleanmining--ganeshasharma.repl.co/css/spoiler.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1 class="spoiler">Spoiler text [You can change this!]</h1>
        <h2 class="spoiler">Spoiler text [You can change this!]</h2>
            <h3 class="spoiler">Spoiler text [You can change this!]</h3>
                <h4 class="spoiler">Spoiler text [You can change this!]</h4>
                    <h5 class="spoiler">Spoiler text [You can change this!]</h5>
                        <h6 class="spoiler">Spoiler text [You can change this!]</h6>
                            <sup class="spoiler">Spoiler text [You can change this!]</sup>
                                <a href="https://www.google.com" class="spoiler">Spoiler text [You can change this!]</a>
                                    <sub class="spoiler">Spoiler text [You can change this!]</sub>
                                        <p class="spoiler">Spoiler text [You can change this!]</p>
  </body>
</html>

0 讨论(0)

眼角桃花

2021-02-20 05:15

I have been spoilers on forums (including my own) that are not just text with the background color changed.

They have the content hidden until you click a show/hide toggle button.

I want to add a section to a site that doesn't show up by default to save space.

https://jsfiddle.net/clarle/bY7m4/

That seems like it will meet my needs.

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

0 讨论(0)

無奈伤痛

2021-02-20 05:27

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

0 讨论(0)

慢半拍i

2021-02-20 05:28
The <details> HTML tag was designed specifically for this purpose. Here is the example from the MDN docs. Unfortunately, IE and edge don't support this tag as of January 2019.
```
<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

我在风中等你

2021-02-20 05:34

How to use checkbox as spoiler hide or show

If you wan't to know that you can also use checkbox for making spoilers. It's quite simple too.

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

Quite boring looking. Let me add just a bit some styles at least it's not boring at all.

// 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">&raquo; Spoiler</label>
<div id="spoilerdiv1">
  <p>This is the spoiler content</p>
</div>

0 讨论(0)