Я добавил класс "spoiler" в CSS для использования, а также для спойлеров. Текст обычно невидим, но появляется, когда мышь нависает над ним, чтобы показать спойлеру тому, кто хочет его прочитать.
.spoiler{
visibility:hidden;
}
.spoiler:hover {
visibility:visible;
}
Должно быть простым, но по какой-то причине это не работает. Текст остается невидимым, даже когда я нажимаю на него мышь. Любая идея, что может быть причиной этого?
Вы не можете нависнуть над скрытым элементом. Одним из решений является вставка элемента внутри другого контейнера:
CSS
.spoiler span {
visibility: hidden;
}
.spoiler:hover span {
visibility: visible;
}
HTML:
Spoiler: <span class="spoiler"><span>E.T. phones home.</span></span>
Демо:
В 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 предназначен только для тегов a в соответствии со спецификацией CSS. Пользовательским агентам не требуется поддержка :hover для не-якорных тегов в соответствии со спецификацией.
Если вы хотите использовать CSS, чтобы сделать видимым текст вашего спойлера, вам нужно разместить теги <a> вокруг вашего содержимого спойлера. Это, конечно, будет означать, что мышь превратится в указатель, но вы можете подавить это, добавив cursor: none;.
Если он не работает, попробуйте
.spoiler span {
visibility: hidden;
line-height:20px;
}
.spoiler:hover span {
visibility: visible;
line-height:20px;
}Попробуйте
.spoiler{
display:none;
}
.spoiler:hover {
display:block;
}