visibility¶
Свойство visibility
предназначено для отображения или скрытия элемента, включая рамку вокруг него и фон.
При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display
.
Блоки
- overflow
- overflow-x
- overflow-y
- visibility
Синтаксис¶
/* Keyword values */
visibility: visible;
visibility: hidden;
visibility: collapse;
/* Global values */
visibility: inherit;
visibility: initial;
visibility: unset;
Значения¶
visible
- Отображает элемент как видимый.
hidden
- Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.
collapse
- Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как
hidden
. В случае использованияcollapse
для содержимого ячеек таблиц, то они реагируют, словно к ним было добавленоdisplay: none
. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer.
Примечание¶
- Internet Explorer до версии 7.0 включительно не поддерживает значение
collapse
. - Браузер Safari до версии 4.0 не поддерживает значение
collapse
. - Opera до версии 9.5 воспринимает значение
collapse
какhidden
для всех элементов.
Значение по-умолчанию: visible
Применяется ко всем элементам
Спецификации¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>visibility</title>
<style>
.button {
background: #fc0;
padding: 10px 20px;
display: inline-block;
}
.descr {
visibility: hidden;
}
.button:hover + .descr {
visibility: visible;
}
</style>
</head>
<body>
<div class="button">Кнопка</div>
<p class="descr">
Данная эксклюзия является подмножеством
астрациональных супремативных монотенных федоний
кадонарного экстрафазория.
</p>
</body>
</html>