CSS свойство visibility

CSS свойства

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
visibility1.01.04.01.04.012.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>
Пример использования свойства visibility.
Пример использования свойства visibility.
CSS свойства