Sifat visibility
Sifat visibility menetapkan ketidaklihatan
kepada elemen. Pada masa yang sama, semua elemen lain
akan berkelakuan seolah-olah elemen tersebut tidak
hilang ke mana-mana.
Sintaks
pemilih {
visibility: visible atau hidden atau collapse;
}
Nilai
| Nilai | Keterangan |
|---|---|
visible |
Elemen kelihatan. |
hidden |
Elemen menjadi tidak kelihatan, seolah-olah lutsinar dan pada masa yang sama terus mengambil bahagian dalam pemformatan halaman. |
collapse |
Jika menggunakan collapse untuk kandungan sel jadual,
maka ia seolah-olah hilang, dan jadual
dibina semula.
Jika nilai ini digunakan bukan untuk baris atau lajur jadual, maka hasil penggunaannya akan sama seperti hidden.
|
Nilai lalai: visible.
Contoh
Mari kita buat supaya teks perenggan pertama pada asalnya
tidak kelihatan, tetapi apabila kursor dihalakan ke butang
'Show text' kita boleh membacanya:
<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;
}
:
