Почему не работает видимость CSS?

Question

Я добавил класс «спойлер» в CSS для использования, ну, в общем, спойлеры. Текст обычно невидим, но появляется, когда мышь наводит на него курсор, чтобы показать спойлер тому, кто захочет его прочитать.

.spoiler{
    visibility:hidden;

}
.spoiler:hover {
    visibility:visible;
}

Должно быть просто, но по какой-то причине это не работает. Текст остается невидимым, даже когда я указываю на него мышью. Есть идеи, что может быть причиной этого?

Answer 1

Вы не можете парить над скрытым элементом. Одним из решений является размещение элемента внутри другого контейнера:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

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

Демо-версия:

http://jsfiddle.net/DBXuv/

Обновление

В Chrome можно добавить следующее:

.spoiler {
    outline: 1px solid transparent;
}

Обновленная демоверсия: http://jsfiddle.net/DBXuv/148/

Answer 2

Работает не только для текста

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

Answer 3

Когда текст невидим, он практически не занимает места, поэтому практически невозможно вызвать событие при наведении.

Вам следует попробовать другой подход, например, изменить цвет шрифта:

.spoiler{
    color:white;

}
.spoiler:hover {
    color:black;
}

Answer 4

Если не работает, попробуйте

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

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

Answer 5

:hover псевдо-класс предназначен только для a тегов в соответствии со спецификацией CSS. Пользовательские агенты не обязаны поддерживать :hover для неякорных тегов согласно спецификации .

Если вы хотите использовать CSS для отображения текста вашего спойлера, вам нужно разместить <a> теги вокруг содержимого спойлера. Это, конечно, будет означать, что мышь превратится в указатель, но вы можете подавить это, добавив cursor: none;.

Answer 6

Попробуйте

.spoiler{
    display:none;

}
.spoiler:hover {
    display:block;
}