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/

Answer 2

It works not only for text

.spoiler {     opacity:0; } .spoiler:hover {     opacity:1;     -webkit-transition: opacity .25s ease-in-out .0s;     transition: opacity .25s ease-in-out .0s; } 

Answer 3

When the text is invisible, it practically does not occupy space, so it's practically imposible to trigger an hover event.

You should try another approach, for example, changing the font color:

.spoiler{
    color:white;

}
.spoiler:hover {
    color:black;
}