Vlastnost visibility

Vlastnost visibility nastavuje neviditelnost prvku. Přitom se všechny ostatní prvky budou chovat tak, jako by prvek nikam nezmizel.

Syntaxe

cssselektor {
  visibility: visible nebo hidden nebo collapse;
}

Hodnota	Popis
`visible`	Prvek je viditelný.
`hidden`	Prvek se stane neviditelným, jako by byl průhledný, a přitom se stále účastní formátování stránky.
`collapse`	Pokud použijete `collapse` pro obsah buněk tabulek, ty jako by zmizely a tabulka se přestaví znovu. Pokud se tato hodnota použije ne na řádky nebo sloupce tabulky, výsledek jejího použití bude stejný jako `hidden`.

Výchozí hodnota: visible.

Udělejme tak, aby text prvního odstavce byl zpočátku neviditelný, ale při najetí kurzoru na tlačítko 'Show text' jsme ho mohli přečíst:

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;
}

Результат: