Eigenschap visibility
De eigenschap visibility bepaalt de onzichtbaarheid
van een element. Andere elementen
gedragen zich alsof het element nergens
is verdwenen.
Syntaxis
selector {
visibility: visible of hidden of collapse;
}
Waarden
| Waarde | Beschrijving |
|---|---|
visible |
Het element is zichtbaar. |
hidden |
Het element wordt onzichtbaar, als het ware doorzichtig, en blijft tegelijkertijd deelnemen aan de opmaak van de pagina. |
collapse |
Als u collapse gebruikt voor de inhoud van tabelcellen,
dan lijken ze te verdwijnen en wordt de tabel
opnieuw opgebouwd.
Als deze waarde wordt toegepast op andere elementen dan tabelrijen of -kolommen, dan is het resultaat hetzelfde als bij hidden.
|
Standaardwaarde: visible.
Voorbeeld
Laten we ervoor zorgen dat de tekst van de eerste alinea aanvankelijk
onzichtbaar is, maar wanneer u de muiscursor over de knop
'Show text' beweegt, we deze kunnen lezen:
<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;
}
:
