Свойство 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>Читайте также
Свойство border-color
Позволяет задать цвет границы сразу для всех сторон элемента или только для указанных....
Свойство grid-column-start
Определяет размер ширины линий. Вы можете думать об этом, как о настройке ширины отступов между столбцами....
Свойство column-width
Задаёт ширину колонки в многоколоночном тексте. Сокращение указанной ширины приводит к отмене нескольких колонок, текст при этом выстраивается в одну ...
Свойство animation-duration
Устанавливает время длительности анимации....