Свойство visibility
Описание
Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остаётся за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display.
Синтаксис
visibility: visible | hidden | collapse;Подробности
| Значение | Описание |
| visible | Отображает элемент как видимый. |
| hidden | Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы. |
| collapse | Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.button {
outline: 3px solid black;
padding: 10px 20px;
display: inline-block;
}
.descr {
visibility: hidden;
}
.button:hover + .descr {
visibility: visible;
}
</style>
<div class='button'>Кнопка</div>
<p class='descr'>
Далеко-далеко за, словесными горами в стране гласных и согласных живут рыбные тексты. Приставка, языкового lorem продолжил инициал напоивший предупреждал снова живет наш
?
</p>
</body>
</html>Читайте также
Свойство letter-spacing
Определяет интервал между символами в пределах элемента. Допустимо использовать отрицательное значение....
Идентификатор
Идентификатор определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты.
При описании и...
Свойство
Задаёт, как выводить линию под или над текстом, когда линия пересекает выносные элементы букв, вроде «у», «р», «ц» и др. Линия может быть сплошной или...
Соседние селекторы
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа....