Тег Visibility у CSS: Відображення та Приховання Елементів
Тег visibility в CSS використовується для відображення або приховання елемента на веб-сторінці. Цей тег забезпечує можливість контролювати видимість елементів та їх розміщення на екрані.
Синтаксис:
visibility: visible | hidden | collapse | inherit
Значення:
- visible
- Відображає елемент як видимий.
- hidden
- Робить елемент невидимим, але він при цьому залишається на своєму місці у форматуванні сторінки.
- collapse
- Змінює поведінку елементів таблиці, викликаючи їх зникнення та перегрупування таблиці. Не підтримується Internet Explorer.
- inherit
- Наслідує значення батьківського елемента.
Приклад:
<!DOCTYPE html>
<html>
<head>
<style>
.descr { visibility: hidden; }
.b:hover + .descr {
visibility: visible;
}
</style>
</head>
<body>
<img src="images/button.gif" width="98" height="33" alt="Кнопка" class="b">
<div class="descr">
Текст, який з'являється при наведенні курсору на кнопку.
</div>
</body>
</html>Браузери:
Internet Explorer до версії 7.0 не підтримує значення inherit та collapse.
Браузер Safari до версії 4.0 не підтримує значення collapse.
Opera до версії 9.5 вважає значення collapse еквівалентним значенню hidden для всіх елементів.