# Свойство visibility

Свойство `visibility` задает невидимость элементу. При этом все остальные элементы будут вести себя так, будто элемент никуда не пропадал.

## Синтаксис

`селектор { visibility: visible или hidden или collapse; }`

## Значения

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

Значение по умолчанию: `visible`.

## Пример

Давайте сделаем так, чтобы текст первого абзаца изначально был невидим, но при наведении курсора на кнопку `'Show text'` мы могли его прочитать:

`<button>Show text</button> <div class="text">text1</div> <div>text2</div>` `div{ border: 1px solid black; width: 100px; } .text { visibility: hidden; } button:hover + .text { visibility: visible; }`

:

## Смотрите также

- свойство `opacity`,
  которое задает прозрачность элементу

← →
↑
en ru