Свойство visibility

Описание

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остаётся за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display.

Синтаксис

visibility: visible | hidden | collapse;

Пример

<!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>

Кнопка

Далеко-далеко за, словесными горами в стране гласных и согласных живут рыбные тексты. Приставка, языкового lorem продолжил инициал напоивший предупреждал снова живет наш ?

Свойство visibility

Описание

Синтаксис

Пример

Читайте также

Свойство grid-template-rows

Свойство padding-inline

Свойство hyphens

Свойство box-decoration-break

Свойство font-stretch

Значение	Описание
visible	Отображает элемент как видимый.
hidden	Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.
collapse	Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой.