Hover dalam antarmuka: apa itu, jenis efek dan implementasi

Apa itu hover dalam desain web

Hover (dari Bahasa Inggris hover — melayang) — reaksi visual elemen antarmuka saat kursor mouse diarahkan ke atasnya. Istilah ini digunakan baik untuk pseudo-kelas CSS :hover itu sendiri maupun keadaan elemen saat diarahkan.

Konsep hover muncul di antarmuka grafis awal Xerox Alto (1973) dan distandarisasi di web dengan munculnya CSS2 pada tahun 1998. Sejak saat itu, hover menjadi bagian tak terpisahkan dari pengalaman pengguna di desktop.

Menurut CSS Usage Statistics (2025), 94% situs di top 1000 menggunakan pseudo-kelas :hover setidaknya untuk satu elemen. Hover paling sering diterapkan pada tombol (89%), tautan (85%) dan kartu (62%).

Perbedaan hover dari keadaan lain

Hover ≠ active. :hover aktif saat diarahkan, :active — saat diklik. :focus aktif saat fokus melalui keyboard. Setiap keadaan menyelesaikan tugasnya masing-masing. Hover adalah pratinjau, active adalah konfirmasi tindakan.

Pseudo-kelas :hover di CSS

Pseudo-kelas :hover di CSS menerapkan gaya pada elemen saat pengguna mengarahkan kursor mouse ke atasnya. Berfungsi dengan elemen HTML apa pun, tetapi paling sering digunakan dengan elemen interaktif.

/* Basic hover implementation */
.button {
    background: #4A90D9;
    color: white;
    padding: 12px 24px;
    border: none;
    transition: all 0.3s ease;
}

.button:hover {
    background: #357ABD;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74,144,217,0.4);
}

Spesifisitas selektor :hover — sama seperti kelas (0,1,0). Jika perlu menimpa hover untuk elemen tertentu, gunakan selektor dengan spesifisitas lebih tinggi. Urutan deklarasi penting: jika mendeklarasikan :hover setelah :focus, hover mungkin tidak berfungsi saat fokus.

Pseudo-kelas kombinasi

:hover dapat dikombinasikan dengan pseudo-kelas lain untuk membuat logika kompleks. Misalnya, .card:hover .card__title mengubah gaya judul di dalam kartu saat hover di seluruh kartu. Ini memungkinkan pembuatan efek dengan animasi bersarang.

Jenis efek hover

Efek hover dibagi menjadi beberapa kategori berdasarkan jenis properti yang diubah. Setiap jenis cocok untuk skenario berbeda dan menciptakan perasaan tertentu pada pengguna.

Paling efektif jenis — kombinasi efek warna dan bayangan. Material Design merekomendasikan penggunaan perubahan tinggi bayangan sebagai jenis utama umpan balik hover.

Menurut Google Material Design (2024), efek hover harus terlihat tetapi tidak mengganggu. Durasi animasi yang disarankan — 200–300 milidetik. Efek terlalu cepat (kurang dari 100 ms) mungkin tidak terlihat, terlalu lambat (lebih dari 500 ms) mengganggu pengguna.

Transisi CSS untuk efek halus

Properti CSS transition membuat efek hover menjadi halus dengan menganimasi perubahan properti seiring waktu. Tanpa transition, hover bekerja secara instan yang terlihat tersentak dan tidak nyaman di mata.

/* Different transitions per property */
.card {
    transition:
        box-shadow 0.3s ease-out,
        transform 0.2s ease-out,
        background 0.15s linear;
}

.card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

Durasi transition tergantung konteks. Untuk elemen kecil (ikon, tautan) — 150–200 ms. Untuk elemen besar (kartu, jendela modal) — 250–350 ms. Fungsi easing ease-out memperlambat animasi secara bertahap di akhir, menciptakan sensasi alami.

Praktik yang disarankan — tentukan transition untuk setiap properti yang dianimasi secara terpisah. Properti all nyaman di tahap pengembangan, tetapi di produksi lebih baik mendefinisikan properti spesifik untuk animasi guna menghindari efek tak terduga.

Hover pada perangkat sentuh

Pada perangkat sentuh konsep hover tidak ada: tidak ada kursor yang bisa diarahkan ke elemen. Menyentuh elemen langsung mengaktifkan click, melewati keadaan hover. Ini menimbulkan masalah jika antarmuka hanya mengandalkan hover.

Menurut StatCounter (2026), 62% lalu lintas web global berasal dari perangkat seluler. Mengabaikan ketiadaan hover di layar sentuh berarti kehilangan kendali atas UX bagi sebagian besar pengguna.

/* Disable hover on touch devices */
@media (hover: none) and (pointer: coarse) {
    .button:hover {
        background: initial;
        transform: none;
    }
}

Media query hover: none memungkinkan menentukan bahwa perangkat tidak mendukung penunjukan. Pada perangkat semacam itu, efek hover dimatikan dan interaksi didasarkan pada keadaan :active dan :focus. Solusi alternatif — menampilkan konten hover saat sentuhan (sentuhan pertama menampilkan hover, kedua menjalankan aksi), tetapi pola ini memperburuk UX.

Aksesibilitas efek hover

Aksesibilitas hover — aspek kritis yang sering diabaikan. Pengguna yang mengontrol antarmuka dengan keyboard tidak dapat mengaktifkan :hover. Fungsi yang hanya tersedia melalui hover menjadi tidak dapat diakses bagi mereka.

Aturan WCAG 2.2 (Success Criterion 1.4.13 — Content on Hover or Focus): konten yang muncul saat hover harus dapat diakses juga saat fokus. Jika hover menampilkan informasi tambahan (tooltip, menu dropdown), informasi yang sama harus tersedia saat :focus.

/* Hover + focus for accessibility */
.tooltip-trigger:hover .tooltip,
.tooltip-trigger:focus .tooltip {
    opacity: 1;
    visibility: visible;
}

/* Disable animation for vestibular disorder */
@media (prefers-reduced-motion: reduce) {
    *:hover {
        transition: none;
    }
}

Media query prefers-reduced-motion — hormati pengaturan sistem pengguna. Jika pengguna menonaktifkan animasi di sistem, efek hover harus diterapkan secara instan tanpa transition. Ini membantu orang dengan gangguan vestibular.

Rekomendasi tambahan: jangan gunakan hover untuk fungsi kritis, jangan hanya gunakan warna untuk menyampaikan informasi saat hover (tambahkan ikon atau teks) dan pastikan kontras yang cukup untuk keadaan hover.