How can I create spoiler text?

Issue

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>

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>

Answered By - corn3lius