Właściwość visibility
Właściwość visibility ustawia niewidoczność
elementu. Jednak wszystkie pozostałe elementy
będą zachowywać się tak, jakby element nigdzie
nie zniknął.
Składnia
selektor {
visibility: visible lub hidden lub collapse;
}
Wartości
| Wartość | Opis |
|---|---|
visible |
Element widoczny. |
hidden |
Element staje się niewidzialny, jakby przezroczysty, i jednocześnie nadal uczestniczy w formatowaniu strony. |
collapse |
Jeśli użyć collapse dla zawartości komórek tabel,
to one jakby znikają, a tabela
przebudowuje się od nowa.
Jeśli tej wartości używa się nie dla wierszy lub kolumn tabeli, to wynik jej zastosowania będzie taki sam, jak hidden.
|
Wartość domyślna: visible.
Przykład
Sprawmy, aby tekst pierwszego akapitu początkowo
był niewidoczny, ale po najechaniu kursorem na przycisk
'Show text' można go było przeczytać:
<button>Show text</button>
<div class="text">text1</div>
<div>text2</div>
div{
border: 1px solid black;
width: 100px;
}
.text {
visibility: hidden;
}
button:hover + .text {
visibility: visible;
}
:
