CSS свойство visibility

Определение и применение

CSS свойство visibility определяет, является ли элемент видимым. При скрытии элемента появляется пустое пространство, чтобы этого избежать необходимо использовать свойство display со значением none.

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
visibility	1.0	1.0	4.0	1.0	4.0	12.0

CSS синтаксис:

visibility:"visible | hidden | collapse | initial | inherit";

JavaScript синтаксис:

object.style.visibility = "hidden"

Значения свойства

Значение	Описание
visible	Элемент видимый. Это значение по умолчанию.
hidden	Элемент невидим. При скрытии элемента появляется пустое пространство, чтобы этого избежать необходимо использовать свойство display со значением none.
collapse	Скрывает строку или столбец, при этом не изменяя общий вид таблицы. Используется только с элементами таблицы. Если collapse используется на другие элементы, он действует как hidden.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Да.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Свойство background-image </title>
<style> 
.hidden {
visibility : hidden;
border : 5px dotted orange;
width : 125px;
text-align : center;
}
.hidden img {
width : 75px;
height : 75px;
}
.hidden:hover {
visibility : visible;
}
.hidden img {
border : 1px solid;
visibility : visible;
}
</style>
</head>
	<body>
		<div class = "hidden">
			<img src = "nich" alt = "nich">
		<div class = "visible">Наведи на меня.</div>
		</div>
	</body>
</html>

CSS свойства