MoreLesson 175Preview gratis
Display Element Hover
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini membahas cara menampilkan elemen tersembunyi ketika pengguna mengarahkan kursor ke kontainer induknya. Efeknya dapat dibuat dengan selector :hover yang menargetkan elemen anak, lalu mengubah opacity atau visibility. Untuk aksesibilitas, gunakan juga :focus-within agar konten dapat muncul saat elemen di dalamnya menerima fokus keyboard.
Poin kunci
- Gunakan selector induk:hover anak untuk menampilkan elemen saat hover
- Atur opacity atau visibility agar elemen tidak menutupi konten lain saat tersembunyi
- Tambahkan :focus-within agar efek juga berjalan untuk pengguna keyboard
- Gunakan transition untuk peralihan yang halus, tetapi hormati prefers-reduced-motion
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.