Hover sa mga interface: ano ito, mga uri ng epekto at implementasyon

Ano ang hover sa web design

Hover (mula sa Ingles na hover — paglutang) — biswal na reaksyon ng elemento ng interface sa paglapit ng cursor ng mouse. Ang termino ay ginagamit kapwa para sa CSS pseudo-class na :hover at para sa estado ng elemento kapag inilapitan.

Ang konsepto ng hover ay lumitaw sa mga unang graphical na interface ng Xerox Alto (1973) at na-standardize sa web sa pagdating ng CSS2 noong 1998. Simula noon, ang hover ay naging mahalagang bahagi ng karanasan ng gumagamit sa desktop.

Ayon sa CSS Usage Statistics (2025), 94% ng mga site sa top 1000 ay gumagamit ng pseudo-class na :hover para sa kahit isang elemento. Ang hover ay pinakamadalas na ginagamit para sa mga button (89%), link (85%) at card (62%).

Pagkakaiba ng hover sa iba pang estado

Hover ≠ active. Ang :hover ay na-activate kapag inilapitan, :active — sa sandali ng pag-click. Ang :focus ay na-activate kapag nakatutok sa pamamagitan ng keyboard. Bawat estado ay may kanya-kanyang gawain. Ang hover ay preview, ang active ay kumpirmasyon ng aksyon.

Pseudo-class na :hover sa CSS

Pseudo-class na :hover sa CSS ay naglalapat ng mga estilo sa elemento kapag inilapit ng gumagamit ang cursor ng mouse dito. Gumagana ito sa kahit anong HTML element, ngunit pinakamadalas na ginagamit sa mga interaktibong elemento.

/* 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);
}

Spesipisidad ng selector na :hover — pareho ng klase (0,1,0). Kung kailangan mong i-override ang hover para sa isang partikular na elemento, gumamit ng selector na may mas mataas na spesipisidad. Pagkakasunod-sunod ng deklarasyon ay mahalaga: kung ideklara mo ang :hover pagkatapos ng :focus, maaaring hindi gumana ang hover kapag nakatutok.

Pinagsamang pseudo-classes

Ang :hover ay maaaring pagsamahin sa iba pang pseudo-classes para sa kumplikadong lohika. Halimbawa, ang .card:hover .card__title ay nagbabago ng estilo ng pamagat sa loob ng card kapag nag-hover sa buong card. Ito ay nagbibigay-daan sa paglikha ng mga epekto na may nested na animasyon.

Mga uri ng hover effect

Ang mga hover effect ay nahahati sa ilang kategorya batay sa uri ng property na binabago. Bawat uri ay angkop para sa iba't ibang senaryo at lumilikha ng tiyak na pakiramdam sa gumagamit.

Pinaka-epektibo na uri — kombinasyon ng epekto ng kulay at anino. Inirerekomenda ng Material Design ang paggamit ng pagbabago ng taas ng anino bilang pangunahing uri ng feedback sa hover.

Ayon sa Google Material Design (2024), ang hover effect ay dapat na kapansin-pansin ngunit hindi nakakaabala. Inirerekomendang tagal ng animasyon — 200–300 millisecond. Ang masyadong mabilis na epekto (mas mababa sa 100 ms) ay maaaring hindi mapansin, masyadong mabagal (higit sa 500 ms) ay nakakainis sa gumagamit.

CSS transitions para sa malulubay na epekto

Ang CSS property na transition ay nagpapakinis ng mga hover effect sa pamamagitan ng pag-animate ng pagbabago ng mga property sa paglipas ng panahon. Kung walang transition, ang hover ay gumagana agad na mukhang maalog at hindi kaaya-aya sa 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);
}

Tagal ng transition ay depende sa konteksto. Para sa maliliit na elemento (icon, link) — 150–200 ms. Para sa malalaking elemento (card, modal window) — 250–350 ms. Easing function ease-out ay pumapabagal ng animasyon sa dulo, lumilikha ng natural na pakiramdam.

Inirerekomendang praktika — tukuyin ang transition para sa bawat ina-animate na property nang hiwalay. Ang property na all ay maginhawa sa yugto ng pag-develop, ngunit sa production mas mainam na tukuyin ang mga tiyak na property para sa animasyon upang maiwasan ang hindi inaasahang epekto.

Hover sa mga touch device

Sa mga touch device ay wala ang konsepto ng hover: walang cursor na maaaring ilapit sa elemento. Ang pagpindot sa elemento ay agad na nag-a-activate ng click, na lumalampas sa hover state. Ito ay lumilikha ng mga problema kung ang interface ay umaasa lamang sa hover.

Ayon sa StatCounter (2026), 62% ng pandaigdigang web traffic ay nagmumula sa mga mobile device. Ang pagwala sa kawalan ng hover sa mga touch screen ay nangangahulugang pagkawala ng kontrol sa UX para sa karamihan ng mga gumagamit.

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

Media query na hover: none ay nagbibigay-daan upang matukoy na ang device ay hindi sumusuporta sa paglapit. Sa mga naturang device, ang mga hover effect ay pinapatay at ang interaksyon ay batay sa :active at :focus states. Alternatibong solusyon — pagpapakita ng hover content sa pagpindot (unang pagpindot ay nagpapakita ng hover, pangalawa ay nagsasagawa ng aksyon), ngunit ang pattern na ito ay nagpapalala ng UX.

Accessibility ng mga hover effect

Accessibility ng hover — isang kritikal na aspeto na madalas hindi napapansin. Ang mga gumagamit na kumokontrol sa interface gamit ang keyboard ay hindi maaaring i-activate ang :hover. Ang mga function na available lamang sa pamamagitan ng hover ay nagiging hindi naa-access para sa kanila.

Panuntunan ng WCAG 2.2 (Success Criterion 1.4.13 — Content on Hover or Focus): ang content na lumalabas sa hover ay dapat na ma-access din sa focus. Kung ang hover ay nagpapakita ng karagdagang impormasyon (tooltip, dropdown menu), ang parehong impormasyon ay dapat na available sa :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 na prefers-reduced-motion — igalang ang system settings ng mga gumagamit. Kung ang gumagamit ay pinatay ang animasyon sa system, ang mga hover effect ay dapat ilapat agad, walang transition. Ito ay tumutulong sa mga tao na may vestibular disorder.

Karagdagang rekomendasyon: huwag gumamit ng hover para sa mga kritikal na function, huwag gumamit lamang ng kulay para maghatid ng impormasyon sa hover (magdagdag ng icon o teksto) at tiyakin ang sapat na contrast para sa mga hover state.