Journal CSS: spoilers

Mar 23, 20094 min read

Deviation Actions

Published: Mar 23, 2009

1.2K Views

note: there are real spoilers to Star Wars in the spoilers below. Don't say I didn't warn you!

There's only so many of these 'Journal CSS:' tutorial/journals I can do before I start sharing stranger techniques, so I don't expect everyone to be using this all the time. After I used it in a journal I figured I share it though, so here we go.

Actually, this is a modified version, see if you can spot the difference:

Original spoiler: Meanwhile, Luke arrives in Cloud City and falls right into Vader's trap. He and Vader engage in a lightsaber duel within the carbon-freezing facilities, eventually bringing them to the city's central air shaft. Gaining an advantage, Vader cuts off Luke's dueling hand along with his lightsaber. With Luke cornered and defenseless, Vader goads Luke to rule the galaxy alongside him, making the horrifying revelation that he is Luke's father.

Alternate spoiler: Padmé gives birth to twins, a boy named Luke and a girl named Leia, and dies, but not before insisting to Obi-Wan that there is still good in Anakin. Meanwhile, Sidious has Darth Vader rebuilt in a cybernetic body armor and respirator suit to keep him alive. Vader lets out a scream of agony when he is told by Sidious that he himself killed his wife. With Anakin's children the last hope for the galaxy, Obi-Wan, Yoda and Organa agree that they should be hidden and separate from one another. Leia is taken to Alderaan to be raised by Organa, while Obi-Wan takes Luke to Tatooine to live with his in-law relatives.

What you should notice in the first block is that the spoiler flickers as the mouse moves between lines.

This happens because my line-height is bigger than my font-size. So when the mouse moves into that gap in between the :hover effect switches off.

If you haven't adjusted the line-height you wont get the flickering, but it'd also look like a solid black chunk, rather than the CIA style censored text.

So why am I showing two different methods?

The first method is fine for ~~inline spoilers that you might want in the middle of paragraphs.~~ The second is better for whole paragraphs where the chance of annoying people with the flickering is higher.

Das HTML

<b>Original spoiler:</b> <strike>SPOILT TEKST GOAD HEER</strike>

<div class="spoiler"><b>Alternate spoiler:</b><strike> SPOILT TEKST GOAD HEER</strike></div>

Das CSS

strike{
  background: #000; 
  color: #000; 
  text-decoration: none}

strike:hover{
  background: transparent; 
  color: inherit !important}

.spoiler:hover strike{
  background: transparent; 
  color: inherit !important}

You can change the two colour values (in red above) to anything you like - but remember to make them match, otherwise this is all pointless.

On hover, the background will be made transparent, and the font colour will be returned to whatever colour the text around the spoiler is (that's what the inherit property does.)

...and that's all there is to it.