Egenskapen visibility
Egenskapen visibility ställer in osynlighet
för ett element. Samtidigt kommer alla andra element
att bete sig som om elementet inte hade försvunnit
någonstans.
Syntax
selektor {
visibility: visible eller hidden eller collapse;
}
Värden
| Värde | Beskrivning |
|---|---|
visible |
Elementet är synligt. |
hidden |
Elementet blir osynligt, som om det vore genomskinligt och fortsätter samtidigt att delta i formateringen av sidan. |
collapse |
Om man använder collapse för innehållet i tabellceller,
så försvinner de som om de vore borta, och tabellen
byggs om på nytt.
Om detta värde appliceras på något annat än tabellrader eller kolumner, blir resultatet av användningen detsamma som hidden.
|
Standardvärde: visible.
Exempel
Låt oss göra så att texten i det första stycket initialt
är osynlig, men när man för muspekaren över knappen
'Show text' kan vi läsa 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;
}
:
