Egenskaben visibility
Egenskaben visibility angiver usynlighed
for et element. Samtidig vil alle andre elementer
opføre sig, som om elementet ikke forsvandt
nogen steder.
Syntaks
selektor {
visibility: visible eller hidden eller collapse;
}
Værdier
| Værdi | Beskrivelse |
|---|---|
visible |
Elementet er synligt. |
hidden |
Elementet bliver usynligt, som gennemsigtigt og deltager samtidig fortsat i formateringen af siden. |
collapse |
Hvis man bruger collapse for indholdet af tabelceller,
så forsvinder de som det var, og tabellen
ombygges på ny.
Hvis denne værdi anvendes ikke på rækker eller kolonner i en tabel, vil resultatet af dens brug være det samme som hidden.
|
Standardværdi: visible.
Eksempel
Lad os gøre sådan, at teksten i det første afsnit oprindeligt
var usynlig, men når markøren føres hen over knappen
'Show text' kunne vi læse den:
<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;
}
:
