Why isn't CSS visibility working?

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开发者_C百科 work. The text remains invisible even when I point the mouse on it. Any idea what could be causing this?

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/

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;
}

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;
}

:hover pseudo class is only for a tags according to the CSS spec. User agents are not required to support :hover for non-anchor tags according to the spec.

If you want to use CSS to make visible your spoiler text you will need to place <a> tags around your spoiler content. This of course will mean that the mouse would turn into a pointer, but you can suppress this by adding cursor: none;.

If it's not working the try

.spoiler span {
    visibility: hidden;
    line-height:20px;
}

.spoiler:hover span {
    visibility: visible;
    line-height:20px;
}

Try

.spoiler{
    display:none;

}
.spoiler:hover {
    display:block;
}