Interfeyslarda Hover: bu nima, effekt turlari va amalga oshirish

Veb dizaynda hover nima

Hover (ingl. hover — uchib yurmoq) — interfeys elementining sichqoncha kursori bilan ustiga borilganda vizual reaksiyasi. Bu atama ham CSS :hover psevdosinfining o'zini, ham elementning ustiga borilgandagi holatini ifodalash uchun ishlatiladi.

Hover kontseptsiyasi Xerox Alto (1973) dastlabki grafik interfeyslarida paydo bo'lgan va 1998-yilda CSS2 paydo bo'lishi bilan vebda standartlashtirilgan. O'shandan beri hover ish stoli kompyuterlarida foydalanuvchi tajribasining ajralmas qismiga aylandi.

CSS Usage Statistics (2025) ma'lumotlariga ko'ra, top 1000 saytlarning 94% kamida bitta element uchun :hover psevdosinfidan foydalanadi. Hover eng ko'p tugmalar (89%), havolalar (85%) va kartalar (62%) uchun qo'llaniladi.

Hoverning boshqa holatlardan farqi

Hover ≠ active. :hover ustiga borilganda, :active bosish paytida faollashadi. :focus klaviatura bilan fokuslanganda faollashadi. Har bir holat o'z vazifasini hal qiladi. Hover — oldindan ko'rish, active — harakatni tasdiqlash.

CSS da :hover psevdosinfi

:hover psevdosinfi CSS da foydalanuvchi sichqoncha kursori bilan element ustiga borganida unga stillarni qo'llaydi. Har qanday HTML element bilan ishlaydi, lekin eng ko'p interaktiv elementlar bilan ishlatiladi.

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

Spetsifikligi — :hover selektorining spetsifikligi sinf bilan bir xil (0,1,0). Agar ma'lum bir element uchun hoverni qayta yozish kerak bo'lsa, yuqori spetsifiklikka ega selektordan foydalaning. E'lon qilish tartibi muhim: agar :hover :focus dan keyin e'lon qilinsa, hover fokusda ishlamasligi mumkin.

Birlashtirilgan psevdosiniflar

:hover boshqa psevdosiniflar bilan birlashtirilishi mumkin murakkab mantiq yaratish uchun. Masalan, .card:hover .card__title butun karta ustiga borilganda karta ichidagi sarlavha uslubini o'zgartiradi. Bu ichki animatsiya bilan effektlar yaratishga imkon beradi.

Hover effektlarining turlari

Hover effektlari o'zgartiriladigan xususiyat turiga qarab bir necha toifaga bo'linadi. Har bir tur turli stsenariylar uchun mos keladi va foydalanuvchida ma'lum bir tuyg'u yaratadi.

Eng samarali tur — rang va soya effektlarining kombinatsiyasi. Material Design hover qayta aloqasining asosiy turi sifatida soya balandligini o'zgartirishni tavsiya qiladi.

Google Material Design (2024) ma'lumotlariga ko'ra, hover effekti sezilarli, ammo chalg'itmaydigan bo'lishi kerak. Tavsiya etilgan animatsiya davomiyligi — 200–300 millisekund. Juda tez effektlar (100 ms dan kam) sezilmasligi mumkin, juda sekin (500 ms dan ortiq) foydalanuvchini bezovta qiladi.

Silliq effektlar uchun CSS o'tishlari

CSS transition xususiyati hover effektlarini silliq qiladi, xususiyatlarning o'zgarishini vaqt davomida animatsiya qiladi. Transition bo'lmaganida hover darhol ishga tushadi, bu ko'zga yoqimsiz ko'rinadi.

/* 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 davomiyligi kontekstga bog'liq. Kichik elementlar uchun (belgilar, havolalar) — 150–200 ms. Katta elementlar uchun (kartalar, modal oynalar) — 250–350 ms. Easing funksiyasi ease-out animatsiyani oxiriga kelib silliq sekinlashtiradi, tabiiy tuyg'u yaratadi.

Tavsiya etilgan amaliyot — har bir animatsiya qilinadigan xususiyat uchun transitionni alohida belgilang. All xususiyati rivojlanish bosqichida qulay, ammo ishlab chiqarishda kutilmagan effektlardan qochish uchun aniq animatsiya xususiyatlarini belgilash yaxshiroq.

Sensorli qurilmalarda hover

Sensorli qurilmalarda hover kontseptsiyasi mavjud emas: elementni ko'rsata oladigan kursor yo'q. Elementga tegish darhol clickni faollashtiradi, hover holatini chetlab o'tadi. Agar interfeys faqat hoverga tayansa, bu muammolarni keltirib chiqaradi.

StatCounter (2026) ma'lumotlariga ko'ra, jahon veb-trafikining 62% mobil qurilmalardan keladi. Sensorli ekranlarda hover yo'qligini e'tiborsiz qoldirish — foydalanuvchilarning aksariyati uchun UX ustidan nazoratni yo'qotish demakdir.

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

hover: none media so'rovi qurilma ustiga borishni qo'llab-quvvatlamasligini aniqlashga imkon beradi. Bunday qurilmalarda hover effektlari o'chiriladi va o'zaro ta'sir :active va :focus holatlariga asoslanadi. Muqobil yechim — tegish paytida hover tarkibini ko'rsatish (birinchi tegish hoverni ko'rsatadi, ikkinchisi — harakatni bajaradi), ammo bu namuna UXni yomonlashtiradi.

Hover effektlarining foydalanish mumkinligi

Hoverning foydalanish mumkinligi — tez-tez e'tibordan chetda qoladigan muhim jihat. Interfeysni klaviatura bilan boshqaradigan foydalanuvchilar :hoverni faollashtira olmaydi. Faqat hover orqali mavjud bo'lgan funksiyalar ular uchun mavjud bo'lmaydi.

WCAG 2.2 qoidasi (Success Criterion 1.4.13 — Content on Hover or Focus): hoverda paydo bo'ladigan tarkib fokusda ham mavjud bo'lishi kerak. Agar hover qo'shimcha ma'lumotni (tooltip, ochiladigan menyu) ko'rsatsa, xuddi shu ma'lumot :focus da ham mavjud bo'lishi kerak.

/* 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 so'rovi — foydalanuvchilarning tizim sozlamalarini hurmat qiling. Agar foydalanuvchi tizimda animatsiyani o'chirgan bo'lsa, hover effektlari darhol, transitionsiz qo'llanilishi kerak. Bu vestibulyar buzilishlari bo'lgan odamlarga yordam beradi.

Qo'shimcha tavsiyalar: muhim funksiyalar uchun hoverdan foydalanmang, hoverda ma'lumot yetkazish uchun faqat rangdan foydalanmang (belgi yoki matn qo'shing) va hover holatlari uchun etarli kontrastni ta'minlang.