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

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

.spoiler{ visibility:hidden; } .spoiler:hover { visibility:visible; } 

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

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

    CSS:

     .spoiler span { visibility: hidden; } .spoiler:hover span { visibility: visible; } 

    HTML:

     Spoiler: ET phones home. 

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

    http://jsfiddle.net/DBXuv/

    Обновить

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

     .spoiler { outline: 1px solid transparent; } 

    Обновлено демо: http://jsfiddle.net/DBXuv/148/

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

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

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

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

     .spoiler{ color:white; } .spoiler:hover { color:black; } 

    :hover pseudo class предназначен только для тегов в соответствии со спецификацией CSS. Пользовательские агенты не обязаны поддерживать :hover на tags, не привязанные к якорям, в соответствии со спецификацией .

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

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

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

    Пытаться

     .spoiler{ display:none; } .spoiler:hover { display:block; } 
    Давайте будем гением компьютера.