Properti visibility
Properti visibility mengatur elemen menjadi
tidak terlihat. Namun, semua elemen lainnya
akan berperilaku seolah-olah elemen tersebut tidak
hilang ke mana-mana.
Sintaks
selector {
visibility: visible atau hidden atau collapse;
}
Nilai
| Nilai | Keterangan |
|---|---|
visible |
Elemen terlihat. |
hidden |
Elemen menjadi tidak terlihat, seolah-olah transparan dan tetap berpartisipasi dalam pemformatan halaman. |
collapse |
Jika menggunakan collapse untuk konten sel tabel,
mereka akan seolah-olah menghilang, dan tabel
akan disusun ulang.
Jika nilai ini diterapkan bukan pada baris atau kolom tabel, maka hasil penggunaannya akan sama dengan hidden.
|
Nilai default: visible.
Contoh
Mari kita buat agar teks paragraf pertama awalnya
tidak terlihat, tetapi saat kursor diarahkan ke tombol
'Show text' kita bisa 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;
}
:
