Как скрыть элемент?

Опубликовано: 15 января 2015 Обновлено: 30 апреля 2019 6 комментариев

Изменить видимость элемента можно тремя способами:

1. С помощью display: none;. Элемент полностью исчезает с веб-страницы, не оставляя и следа.

2. Задав для элемента visibility: hidden;. Данный способ убирает элемент из вида, при этом не затрагивая поток html-документа, оставляя пустое пространство в том месте, где данный элемент должен был находиться.

3. С помощью свойства opacity. Значение opacity: 0; делает прозрачным весь элемент целиком, включая его содержимое, а не только фон элемента. Данный способ действует аналогично с visibility: hidden, отличие состоит лишь в том, что свойство opacity введено в спецификацию CSS3.

Для абсолютно позиционированных элементов visibility: hidden и display: none ведут себя одинаково.

Чтобы показать невидимый элемент, можно использовать псевдокласс :hover, например:

.submenu {
display: none;
}
.submenu:hover {
display: block;
}

CSS-свойство, отвечающее только за видимость элементов — это свойство visibility. Оно принимает следующие значения:

visibility: visible; — элемент видимый по умолчанию;

visibility: hidden; — элемент становится невидимым, находясь при этом на своем месте. В то же время элементы-потомки невидимого элемента можно сделать видимыми, например:

p {
visibility: hidden;
}
p strong {
visibility: visible;
}

visibility: collapse; — данное свойство применяется для табличных элементов, делая ячейки таблицы невидимыми. Если это свойство используется для остальных элементов, то оно работает аналогично с visibility: hidden;;

visibility: inherit; — наследует это свойство от родительского элемента.

Поделиться: