Postingan lainnya
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