Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
ask cara baca selektor css
.dropdown:hover .dropdown-content { display: block; } bedanya dengan yang di bawah
.dropdown:hover, .dropdown-content { display: block; }
3 Jawaban:
1. Kalau yang pertama itu dipake buat nampilin .dropdown-content. Jadi ketika .dropdown dihover maka .dropdown-content yang awalnya misalnya "dispaly:inline" atau "display:none" maka ia (.dropdown-content) akan menjadi "display:block". Ini mungkin bisa diterapkan untuk struktur html seperti ini:
<div class="dropdown">
<div class="dropdown-content"></div>
</div>
contoh kasus: .dropdown-content disembunyikan dengan "display:none" nah ketika .dropdown dihover maka otomatis .dropdown-content akan terlihat karena "display:block".
2. sedangkan untuk kode yang kedua itu digunakan untuk membuat kedua selector memiliki nilai sama "display:block".
- jadi misalnya awalnya .dropdown itu nilainya "display:inline" namun ketika ia dihover maka berubah menjadi "display:block" sehingga kodenya seperti ini kan ya...
.dropdown{display:inline;} .dropdown:hover{display:block}
Jawaban Terpilih
(LANJUTAN)
-kemudian untuk .dropdown-content itu mungkin saja adalah tag a atau tag span. sehingga butuh untuk memperjelas nilainya kalau memang ingin dibuat jadi block.
sehingga dari situ secara keseluruhan code cssnya kan gini:
.dropdown{display:inline;} .dropdown:hover{display:block}--------perhatikan ini .dropdown-content{display:block}------perhatikan ini
coba perhatikan code diatas nilai dari .dropdown:hover dan .dropdown-content sama2 "display:block". Olehnya itu jadilah ia disingkat menjadi:
.dropdown:hover, .dropdown-content { display: block; }
semoga membantu bro.
terima kasih bantuannya membantu sekali problem resolved. :D