Proprietatea visibility
Proprietatea visibility setează invizibilitatea
elementului. În acest caz, toate celelalte elemente
se vor comporta ca și cum elementul nu a dispărut
nicăieri.
Sintaxă
selector {
visibility: visible sau hidden sau collapse;
}
Valori
| Valoare | Descriere |
|---|---|
visible |
Elementul este vizibil. |
hidden |
Elementul devine invizibil, ca și cum ar fi transparent și în același timp continuă să participe la formatarea paginii. |
collapse |
Dacă utilizați collapse pentru conținutul celulelor tabelelor,
acestea par să dispară, iar tabelul
se restructurează din nou.
Dacă această valoare este aplicată nu la rânduri sau coloane de tabel, atunci rezultatul utilizării sale va fi același ca hidden.
|
Valoarea implicită: visible.
Exemplu
Să facem astfel încât textul primului paragraf inițial
să fie invizibil, dar la plasarea cursorului pe butonul
'Show text' să îl putem citi:
<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;
}
:
