A visibility tulajdonság

A visibility tulajdonság az elem láthatatlanságát állítja be. Eközben az összes többi elem úgy fog viselkedni, mintha az elem sehova nem tűnt volna el.

Szintaxis

cssszelektor {
  visibility: visible vagy hidden vagy collapse;
}

Értékek

Érték	Leírás
`visible`	Az elem látható.
`hidden`	Az elem láthatatlanná válik, mintha átlátszó lenne, és eközben továbbra is részt vesz az oldal formázásában.
`collapse`	Ha a `collapse` értéket táblázat celláinak tartalmára használjuk, akkor azok mintha eltűnnének, és a táblázat újraépül. Ha ezt az értéket nem táblázat sorokra vagy oszlopokra alkalmazzuk, akkor a használatának eredménye ugyanaz lesz, mint a `hidden` esetén.

Alapértelmezett érték: visible.

Példa

Tegyük úgy, hogy az első bekezdés szövege kezdetben láthatatlan legyen, de amikor a kurzort a 'Show text' gombra visszük, akkor olvasható legyen:

html<button>Show text</button>
<div class="text">text1</div>
<div>text2</div>

cssdiv{
  border: 1px solid black;
  width: 100px;
}
.text {
  visibility: hidden;
}
button:hover + .text {
  visibility: visible;
}

Результат:

Lásd még

a opacity tulajdonság,
amely az elem átlátszóságát állítja be
a hidden attribútum,
amely elrejti az elemet az oldalról