Hover v rozhraních: co to je, typy efektů a implementace

Co je hover v webdesignu

Hover (z anglického hover — vznášet se) — vizuální reakce prvku rozhraní na najetí kurzoru myši. Termín se používá jak pro samotnou CSS pseudotřídu :hover, tak pro stav prvku při najetí.

Koncepce hoveru se objevila v raných grafických rozhraních Xerox Alto (1973) a byla standardizována na webu s příchodem CSS2 v roce 1998. Od té doby se hover stal nedílnou součástí uživatelského zážitku na desktopu.

Podle CSS Usage Statistics (2025) používá 94 % webů v top 1000 pseudotřídu :hover alespoň pro jeden prvek. Hover se nejčastěji aplikuje na tlačítka (89 %), odkazy (85 %) a karty (62 %).

Rozdíl mezi hoverem a jinými stavy

Hover ≠ active. :hover se aktivuje při najetí, :active — v okamžiku kliknutí. :focus se aktivuje při fokusu z klávesnice. Každý stav řeší svůj úkol. Hover je náhled, active je potvrzení akce.

Pseudotřída :hover v CSS

Pseudotřída :hover v CSS aplikuje styly na prvek, když uživatel najede kurzorem myši na něj. Funguje s libovolným HTML prvkem, ale nejčastěji se používá s interaktivními prvky.

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

Specifičnost selektoru :hover — stejná jako třídy (0,1,0). Pokud potřebujete přepsat hover pro konkrétní prvek, použijte selektor s vyšší specifičností. Pořadí deklarací je důležité: pokud deklarujete :hover po :focus, hover nemusí při fokusu fungovat.

Kombinované pseudotřídy

:hover lze kombinovat s dalšími pseudotřídami pro vytvoření složité logiky. Například .card:hover .card__title mění styl nadpisu uvnitř karty při najetí na celou kartu. To umožňuje vytvářet efekty s vnořenou animací.

Typy hover efektů

Hover efekty se dělí do několika kategorií podle typu měněné vlastnosti. Každý typ je vhodný pro různé scénáře a vytváří u uživatele určitý pocit.

Nejefektivnější typ — kombinace barevného a stínového efektu. Material Design doporučuje používat změnu výšky stínu jako hlavní typ hover zpětné vazby.

Podle Google Material Design (2024) by měl být hover efekt znatelný, ale ne rušivý. Doporučená délka animace — 200–300 milisekund. Příliš rychlé efekty (méně než 100 ms) mohou zůstat nepovšimnuty, příliš pomalé (více než 500 ms) uživatele dráždí.

CSS přechody pro plynulé efekty

CSS vlastnost transition dělá hover efekty plynulými tím, že animuje změnu vlastností v čase. Bez transition hover působí okamžitě, což vypadá trhaně a je nepříjemné pro oko.

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

Délka transition závisí na kontextu. Pro malé prvky (ikony, odkazy) — 150–200 ms. Pro velké prvky (karty, modální okna) — 250–350 ms. Funkce easing ease-out plynule zpomaluje animaci na konci a vytváří přirozený pocit.

Doporučená praxe — specifikujte transition pro každou animovanou vlastnost zvlášť. Vlastnost all je pohodlná ve fázi vývoje, ale v produkci je lepší definovat konkrétní vlastnosti pro animaci, aby se předešlo neočekávaným efektům.

Hover na dotykových zařízeních

Na dotykových zařízeních koncepce hoveru neexistuje: není kurzor, který by mohl najet na prvek. Dotyk prvku okamžitě aktivuje click a přeskočí hover stav. To vytváří problémy, pokud se rozhraní spoléhá výhradně na hover.

Podle StatCounter (2026) pochází 62 % světového webového provozu z mobilních zařízení. Ignorovat absenci hoveru na dotykových obrazovkách znamená ztratit kontrolu nad UX pro většinu uživatelů.

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

Media dotaz hover: none umožňuje zjistit, že zařízení nepodporuje najetí. Na takových zařízeních jsou hover efekty vypnuty a interakce je založena na stavech :active a :focus. Alternativní řešení — zobrazení hover obsahu při dotyku (první dotyk zobrazí hover, druhý provede akci), ale tento vzor zhoršuje UX.

Přístupnost hover efektů

Přístupnost hoveru — kritický aspekt, který je často opomíjen. Uživatelé, kteří ovládají rozhraní klávesnicí, nemohou aktivovat :hover. Funkce dostupné pouze přes hover se pro ně stávají nedostupnými.

Pravidlo WCAG 2.2 (Success Criterion 1.4.13 — Content on Hover or Focus): obsah zobrazený při hoveru musí být přístupný i při fokusu. Pokud hover zobrazuje dodatečné informace (tooltip, rozbalovací menu), stejné informace musí být dostupné při :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 dotaz prefers-reduced-motion — respektujte systémová nastavení uživatelů. Pokud uživatel vypnul animaci v systému, hover efekty by měly být aplikovány okamžitě, bez transition. To pomáhá lidem s vestibulárními poruchami.

Další doporučení: nepoužívejte hover pro kritické funkce, nepoužívejte pouze barvu pro předávání informací při hoveru (přidejte ikonu nebo text) a zajistěte dostatečný kontrast pro hover stavy.