Vlastnosť visibility

Vlastnosť visibility nastavuje neviditeľnosť elementu. Pri tom všetky ostatné elementy sa budú správať tak, ako keby element nikam nezmizol.

Syntax

cssselektor {
  visibility: visible alebo hidden alebo collapse;
}

Hodnota	Popis
`visible`	Element je viditeľný.
`hidden`	Element sa stane neviditeľným, akoby priehľadným a pri tom naďalej účinkuje na formátovanie stránky.
`collapse`	Ak použijete `collapse` pre obsah buniek tabuliek, tak akoby zmiznú, a tabuľka sa prestaví nanovo. Ak sa táto hodnota aplikuje nie na riadky alebo stĺpce tabuľky, výsledok jej použitia bude rovnaký, ako pri `hidden`.

Predvolená hodnota: visible.

Urobme tak, aby text prvého odseku bol pôvodne neviditeľný, ale pri nadidení kurzora na tlačidlo 'Show text' sme ho mohli prečítať:

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

Результат: