Есть желание присоединиться к интересным IT проектам? Смотри открытые вакансии.

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 свойства
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.