Visibility-ominaisuus
Ominaisuus visibility asettaa näkymättömyyden
elementille. Tällöin kaikki muut elementit
käyttäytyvät niin kuin elementti ei olisi
minnekään kadonnut.
Syntaksi
valitsija {
visibility: visible tai hidden tai collapse;
}
Arvot
| Arvo | Kuvaus |
|---|---|
visible |
Elementti on näkyvissä. |
hidden |
Elementistä tulee näkymätön, ikään kuin läpinäkyvä, ja silti se osallistuu sivun muotoiluun. |
collapse |
Jos collapse -arvoa käytetään taulukon solujen sisällölle,
ne ikään kuin katoavat ja taulukko
rakentuu uudelleen.
Jos tätä arvoa sovelletaan muuhun kuin taulukon riveihin tai sarakkeisiin, sen käytön tulos on sama kuin hidden -arvolla.
|
Oletusarvo: visible.
Esimerkki
Tehdään niin, että ensimmäisen kappaleen teksti on aluksi
näkymätön, mutta kun kursosri viedään napin
'Show text' päälle, voimme lukea sen:
<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;
}
:
