:hover :focus :active dan :visited
Atur gaya keadaan interaktif tautan dan tombol menggunakan pseudo-class CSS yang paling umum.
:hover :focus :active dan :visited adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Apa Itu Kelas Semu?
Kelas semu memilih elemen berdasarkan status atau hubungannya dengan elemen lain. Kelas semu diawali satu titik dua : dan tidak memerlukan penambahan atribut pada HTML.
:hover
:hover diterapkan ketika penunjuk pengguna berada di atas suatu elemen. Ini adalah pemilih status interaktif yang paling umum.
<p><a href="#" class="demo-hover">Hover this link</a></p>
<div class="card demo-hover">Hover this card</div>
:focus
:focus diterapkan ketika suatu elemen menerima fokus (melalui tombol Tab pada papan ketik atau fokus secara terprogram). Hal ini sangat penting untuk aksesibilitas.
<input type="text" placeholder="Auto-focused input" autofocus />
<button>Click me (focus me too)</button>
:focus-visible
:focus-visible adalah versi :focus yang lebih cerdas — indikator fokus hanya ditampilkan ketika fokus diperoleh melalui papan ketik, bukan tetikus. Dengan begitu, pengguna papan ketik mendapatkan indikator fokus tanpa lingkaran fokus akibat klik tetikus.
<button autofocus>Keyboard-focused button shows a ring</button>
:focus-within
:focus-within diterapkan pada suatu elemen ketika salah satu turunannya memiliki fokus. Ini berguna untuk menata wadah formulir atau bilah pencarian saat aktif.
<form class="search-form"><input type="search" placeholder="Search…" autofocus /></form>
:active
:active diterapkan selama suatu elemen sedang diaktifkan — saat diklik dengan tetikus atau disentuh. Ini memberikan umpan balik visual untuk elemen interaktif.
<button class="demo-active">Pressed button (demo state)</button>
:visited
:visited menerapkan gaya pada tautan yang sudah dikunjungi pengguna. Karena pertimbangan privasi, hanya sekumpulan properti terbatas yang dapat diberi gaya dengan :visited (color, background-color, border-color, outline-color).
<a href="#" class="demo-visited">Visited link</a>
Urutan Status Tautan (LVHA)
Saat menata keempat status tautan, ikuti urutan LVHA untuk mencegah masalah spesifisitas: Lautan, Vdikunjungi, Harahkan, Aktif.
<p><a href="#">Unvisited (link)</a></p>
<p><a href="#" class="demo-visited">Visited</a></p>
<p><a href="#" class="demo-hover">Hover</a></p>
<p><a href="#" class="demo-active">Active</a></p>
Hover pada Perangkat Sentuh
Layar sentuh tidak memiliki status hover dengan cara yang sama seperti tetikus. :hover mungkin aktif sebentar saat layar diketuk. Untuk interaksi khusus sentuhan, gunakan :active atau kueri media @media (hover: none).
Menggabungkan Status
Kelas semu dapat dirangkai untuk menata beberapa status secara bersamaan:
<a href="#" class="demo-visited-hover">Visited link being hovered</a>
<button>Click-focused button gets no ring</button>
Transisi Status Hover
Gunakan transisi pada status dasar, bukan pada status :hover, untuk menghasilkan efek hover yang halus sehingga transisi berjalan ke kedua arah:
<button class="btn demo-hover">Hover transitions smoothly</button>
Cek Cepat
Kelas semu mana yang menampilkan gaya fokus hanya untuk navigasi papan ketik, bukan klik tetikus?
Ringkasan
:hover aktif saat penunjuk berada di atas elemen; :focus saat masukan menerima fokus; :active selama klik; :visited untuk tautan yang telah dikunjungi. Gunakan :focus-visible untuk indikator fokus khusus papan ketik. Ikuti urutan LVHA untuk status tautan. Selalu sediakan indikator fokus yang terlihat demi aksesibilitas.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “:hover :focus :active dan :visited” gratis?
Ya — teks lengkap “:hover :focus :active dan :visited” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “:hover :focus :active dan :visited”?
Atur gaya keadaan interaktif tautan dan tombol menggunakan pseudo-class CSS yang paling umum. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “:hover :focus :active dan :visited” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- :hover :focus :active dan :visited
- :nth-child dan :nth-of-type
- :not() :is() dan :where()
- :checked :disabled dan Pseudo Form State