Ховер у интерфејсима: шта је то, врсте ефеката и имплементација

Шта је ховер у веб дизајну

Ховер (од енгл. hover — лебдети) — визуелна реакција елемента интерфејса на прелазак курсора миша. Термин се користи како за саму CSS псеудокласу :hover, тако и за стање елемента при преласку.

Концепт ховера појавио се у раним графичким интерфејсима Xerox Alto (1973) и стандардизован је на вебу са појавом CSS2 1998. године. Од тада, ховер је постао саставни део корисничког искуства на десктопу.

Према CSS Usage Statistics (2025), 94% сајтова у топ 1000 користи псеудокласу :hover барем за један елемент. Најчешће се ховер примењује на дугмад (89%), линкове (85%) и картице (62%).

Разлика између ховера и других стања

Ховер ≠ active. :hover се активира при преласку, :active — у тренутку клика. :focus се активира при фокусу са тастатуре. Свако стање решава свој задатак. Ховер је преглед, active — потврда радње.

Псеудокласа :hover у CSS-у

Псеудокласа :hover у CSS-у примењује стилове на елемент када корисник пређе курсором миша преко њега. Ради са било којим HTML елементом, али се најчешће користи са интерактивним елементима.

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

Специфичност селектора :hover — иста као класе (0,1,0). Ако треба да препишете ховер за одређени елемент, користите селектор са већом специфичношћу. Редослед декларација је важан: ако декларишете :hover после :focus, ховер можда неће радити при фокусу.

Комбиноване псеудокласе

:hover се може комбиновати са другим псеудокласама за креирање сложене логике. На пример, .card:hover .card__title мења стил наслова унутар картице при преласку преко целе картице. Ово омогућава креирање ефеката са угњежденом анимацијом.

Врсте ховер ефеката

Ховер ефекти се деле у неколико категорија према типу особине која се мења. Сваки тип одговара различитим сценаријима и ствара одређени осећај код корисника.

Најефикаснији тип — комбинација ефекта боје и сенке. Material Design препоручује коришћење промене висине сенке као главног типа ховер повратне информације.

Према Google Material Design (2024), ховер ефекат треба да буде приметан, али не и ометајући. Препоручено трајање анимације — 200–300 милисекунди. Сувише брзи ефекти (мање од 100 ms) могу остати непримећени, сувише спори (више од 500 ms) иритирају корисника.

CSS прелази за глатке ефекте

CSS особина transition чини ховер ефекте глаткима, анимирајући промену особина током времена. Без transition ховер делује тренутно, што изгледа трзаво и непријатно за око.

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

Трајање transition зависи од контекста. За мале елементе (иконе, линкови) — 150–200 ms. За велике елементе (картице, модални прозори) — 250–350 ms. Easing функција ease-out глатко успорава анимацију при крају, стварајући природан осећај.

Препоручена пракса — наведите transition за сваку анимирану особину посебно. Особина all је згодна у фази развоја, али у продукцији је боље дефинисати конкретне особине за анимацију како би се избегли неочекивани ефекти.

Ховер на touch уређајима

На сензорним уређајима концепт ховера не постоји: нема курсора који би могао да пређе преко елемента. Додир елемента одмах активира click, прескачући ховер стање. Ово ствара проблеме ако се интерфејс ослања искључиво на ховер.

Према StatCounter (2026), 62% светског веб саобраћаја долази са мобилних уређаја. Игнорисати недостатак ховера на touch екранима значи изгубити контролу над UX за већину корисника.

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

Медија упит hover: none омогућава да се утврди да уређај не подржава прелазак курсора. На таквим уређајима, ховер ефекти се искључују и интеракција се заснива на :active и :focus стањима. Алтернативно решење — приказивање ховер садржаја при додиру (први додир приказује ховер, други извршава акцију), али овај образац погоршава UX.

Приступачност ховер ефеката

Приступачност ховера — критичан аспект који се често занемарује. Корисници који управљају интерфејсом са тастатуре не могу да активирају :hover. Функције доступне само преко ховера постају недоступне за њих.

Правило WCAG 2.2 (Success Criterion 1.4.13 — Content on Hover or Focus): садржај који се појављује при ховеру мора бити доступан и при фокусу. Ако ховер приказује додатне информације (tooltip, падајући мени), исте информације морају бити доступне при :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;
    }
}

Медија упит prefers-reduced-motion — поштујте системска подешавања корисника. Ако је корисник искључио анимацију у систему, ховер ефекти треба да се примењују тренутно, без transition. Ово помаже људима са вестибуларним поремећајима.

Додатне препоруке: не користите ховер за критичне функције, не користите само боју за преношење информација при ховеру (додајте икону или текст) и обезбедите довољан контраст за ховер стања.