Why isn't CSS visibility working?

Question

I added a "spoiler" class in CSS to use for, well, spoilers. Text is normally invisible but appears when the mouse hovers over it to reveal the spoiler to whoever wants to read it.

.spoiler{
    visibility:hidden;

}
.spoiler:hover {
    visibility:visible;
}

Should be simple, but for some reason this doesn't work. The text remains invisible even when I point the mouse on it. Any idea what could be causing this?

Answer 1

You cannot hover over a hidden element. One solution is to nest the element inside another container:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: <span class="spoiler"><span>E.T. phones home.</span></span>

Demo:

http://jsfiddle.net/DBXuv/

Update

On Chrome, the following can be added:

.spoiler {
    outline: 1px solid transparent;
}

Updated demo: http://jsfiddle.net/DBXuv/148/