How can I create spoiler text?

css, html

Solution

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

.spoiler:hover, .spoiler:hover a {
  color: white;
}

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

<span class="spoiler" >test <a href='#'>with link</a> </span>

<p>Then when hovered over <a href='#'> outside link</a> </p>

<span class="spoiler2"> other test <a href='#'>with link</a> </span>

Problem

How can I make spoiler text on a website with HTML and CSS? What I was is, text that is black with black background, but when hovered over, makes the black text turn white, making it visible. Like this: ``` <span style="color: black; background: black;">test</span> <p>Then when hovered over</p> <span style="color: white; background: black;">test</span> ```

Original source