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

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

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; — наследует это свойство от родительского элемента.

  • rojer9999

    А как же height: 0;? 🙂

    • )) Тогда ещё и transform:scale(0). Здесь речь шла именно о свойствах, отвечающих за видимость, а не за размеры элемента.

      • rojer9999

        Вот оно что…
        А за transform:scale(0); спасибо, записал)))

        • В принципе, можно и эти способы в статью добавить, чтобы была полная картина.

          • rojer9999

            Было бы здорово. После того как я случайно забрел к вам на сайт моя шпаргалка всё разрастается и разрастается =)

          • Спасибо, рада, что мой сайт оказался вам полезным.