İnterfeyslərdə Hover: bu nədir, effekt növləri və tətbiqi

Veb dizaynda hover nədir

Hover (ing. hover — süzülmək) — interfeys elementinin siçan kursoru ilə üzərinə gəlindikdə vizual reaksiyasıdır. Termin həm CSS :hover psevdosinfini, həm də elementin üzərinə gəlindikdəki vəziyyətini ifadə etmək üçün istifadə olunur.

Hover konsepsiyası Xerox Alto (1973) erkən qrafik interfeyslərində meydana çıxmış və 1998-ci ildə CSS2-nin yaranması ilə vebdə standartlaşdırılmışdır. O vaxtdan bəri hover masaüstü kompüterlərdə istifadəçi təcrübəsinin ayrılmaz hissəsinə çevrilmişdir.

CSS Usage Statistics (2025) məlumatına görə, top 1000-dəki saytların 94%-i ən azı bir element üçün :hover psevdosinfindən istifadə edir. Hover ən çox düymələr (89%), keçidlər (85%) və kartlar (62%) üçün tətbiq olunur.

Hoverin digər vəziyyətlərdən fərqi

Hover ≠ active. :hover üzərinə gəlindikdə, :active klikləmə anında aktivləşir. :focus klaviatura ilə fokuslandıqda aktivləşir. Hər vəziyyət öz tapşırığını həll edir. Hover — ön baxış, active — hərəkətin təsdiqidir.

CSS-də :hover psevdosinfi

:hover psevdosinfi CSS-də istifadəçi elementin üzərinə siçan kursoru ilə gəldikdə elementə stillər tətbiq edir. İstənilən HTML elementi ilə işləyir, lakin ən çox interaktiv elementlərlə istifadə olunur.

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

Spesifiklik — :hover seçicisinin spesifikliyi siniflə eynidir (0,1,0). Müəyyən element üçün hoveri dəyişdirmək lazımdırsa, daha yüksək spesifikliyə malik seçicidən istifadə edin. Bəyannamə sırası vacibdir: :focus-dan sonra :hover elan edilərsə, hover fokusda işləməyə bilər.

Birləşdirilmiş psevdosiniflər

:hover digər psevdosiniflərlə birləşdirilə bilər mürəkkəb məntiq yaratmaq üçün. Məsələn, .card:hover .card__title bütün karta gəlindikdə kartın içindəki başlığın stilini dəyişir. Bu, daxili animasiya ilə effektlər yaratmağa imkan verir.

Hover effektlərinin növləri

Hover effektləri dəyişdirilən xüsusiyyətin növünə görə bir neçə kateqoriyaya bölünür. Hər bir növ müxtəlif ssenarilər üçün uyğundur və istifadəçidə müəyyən hiss yaradır.

Ən effektiv növ — rəng və kölgə effektlərinin kombinasiyası. Material Design hover-əks əlaqənin əsas növü kimi kölgə hündürlüyünün dəyişdirilməsini tövsiyə edir.

Google Material Design (2024) məlumatına görə, hover effekti nəzərə çarpan, lakin yayındırmayan olmalıdır. Tövsiyə olunan animasiya müddəti 200–300 millisaniyədir. Çox sürətli effektlər (100 ms-dən az) nəzərə çarpmaya bilər, çox yavaş (500 ms-dən çox) istifadəçini qıcıqlandırır.

Hamar effektlər üçün CSS keçidləri

CSS transition xüsusiyyəti hover effektlərini hamar edir, xassələrin dəyişməsini zamanla animasiya edir. Transition olmadan hover dərhal işə düşür, bu da gözə xoş gəlmir.

/* 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 müddəti kontekstdən asılıdır. Kiçik elementlər üçün (ikonlar, keçidlər) — 150–200 ms. Böyük elementlər üçün (kartlar, modal pəncərələr) — 250–350 ms. Easing funksiyası ease-out animasiyanı sona doğru hamarca yavaşladır, təbii hiss yaradır.

Tövsiyə olunan təcrübə — hər animasiya edilən xassə üçün transition-ı ayrıca göstərin. All xassəsi inkişaf mərhələsində rahatdır, lakin istehsalda gözlənilməz effektlərdən qaçmaq üçün konkret animasiya xassələrini təyin etmək daha yaxşıdır.

Touch cihazlarda hover

Sensor cihazlarda hover konsepsiyası yoxdur: elementi göstərə biləcək kursor yoxdur. Elementə toxunma dərhal click-i aktivləşdirir, hover vəziyyətini keçər. Bu, interfeys yalnız hover-ə əsaslanırsa problemlər yaradır.

StatCounter (2026) məlumatına görə, dünya veb trafikinin 62%-i mobil cihazlardan gəlir. Touch ekranlarda hoverin olmamasını göz ardı etmək — istifadəçilərin əksəriyyəti üçün UX üzərində nəzarəti itirmək deməkdir.

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

hover: none media sorğusu cihazın üzərə gəlməyi dəstəkləmədiyini müəyyən etməyə imkan verir. Belə cihazlarda hover effektləri söndürülür və qarşılıqlı əlaqə :active və :focus vəziyyətlərinə əsaslanır. Alternativ həll — toxunma zamanı hover məzmununu göstərmək (ilk toxunma hoveri göstərir, ikincisi — hərəkəti yerinə yetirir), lakin bu nümunə UX-i pisləşdirir.

Hover effektlərinin əlçatanlığı

Hoverin əlçatanlığı — tez-tez gözdən qaçan kritik aspektdir. İnterfeysi klaviatura ilə idarə edən istifadəçilər :hover-i aktivləşdirə bilməz. Yalnız hover vasitəsilə əlçatan olan funksiyalar onlar üçün əlçatmaz olur.

WCAG 2.2 qaydası (Success Criterion 1.4.13 — Content on Hover or Focus): hover zamanı görünən məzmun fokusda da əlçatan olmalıdır. Əgər hover əlavə məlumat göstərirsə (tooltip, açılan menyu), bu eyni məlumat :focus-da da əlçatan olmalıdır.

/* 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 media sorğusu — istifadəçilərin sistem parametrlərinə hörmət edin. İstifadəçi sistemdə animasiyanı söndürübsə, hover effektləri dərhal, transitionsız tətbiq edilməlidir. Bu, vestibulyar pozğunluğu olan insanlara kömək edir.

Əlavə tövsiyələr: kritik funksiyalar üçün hover istifadə etməyin, hoverdə məlumat ötürmək üçün yalnız rəngdən istifadə etməyin (ikon və ya mətn əlavə edin) və hover vəziyyətləri üçün kifayət qədər kontrast təmin edin.