इंटरफ़ेस में होवर: यह क्या है, प्रभावों के प्रकार और कार्यान्वयन

वेब डिज़ाइन में होवर क्या है

होवर (अंग्रेज़ी “to hover” से) — इंटरफ़ेस तत्व की एक दृश्य प्रतिक्रिया जब माउस कर्सर उसके ऊपर होता है। यह शब्द CSS :hover स्यूडो-क्लास और होवर पर तत्व की स्थिति दोनों को संदर्भित करने के लिए उपयोग किया जाता है।

होवर की अवधारणा Xerox Alto (1973) के शुरुआती ग्राफिकल इंटरफ़ेस में उत्पन्न हुई और 1998 में CSS2 की शुरुआत के साथ वेब पर मानकीकृत की गई। तब से, होवर डेस्कटॉप पर उपयोगकर्ता अनुभव का एक अभिन्न अंग बन गया है।

CSS Usage Statistics (2025) के अनुसार, शीर्ष 1000 में से 94% साइटें कम से कम एक तत्व के लिए :hover स्यूडो-क्लास का उपयोग करती हैं। होवर सबसे अधिक बटन (89%), लिंक (85%) और कार्ड (62%) पर लागू किया जाता है।

होवर और अन्य स्थितियों के बीच अंतर

होवर ≠ active। :hover माउस के ऊपर जाने पर सक्रिय होता है, :active क्लिक के समय सक्रिय होता है। :focus कीबोर्ड के माध्यम से फ़ोकस प्राप्त करने पर सक्रिय होता है। प्रत्येक स्थिति अपने उद्देश्य की पूर्ति करती है। होवर एक पूर्वावलोकन है, active कार्रवाई की पुष्टि है।

CSS में :hover स्यूडो-क्लास

CSS में :hover स्यूडो-क्लास किसी तत्व पर स्टाइल लागू करता है जब उपयोगकर्ता माउस कर्सर को उसके ऊपर ले जाता है। यह किसी भी 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 मिलीसेकंड से कम) पर किसी का ध्यान नहीं जा सकता, जबकि बहुत धीमे प्रभाव (500 मिलीसेकंड से अधिक) उपयोगकर्ता को परेशान करते हैं।

स्मूथ इफ़ेक्ट के लिए 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 मिलीसेकंड। बड़े तत्वों (कार्ड, मोडल) के लिए — 250–350 मिलीसेकंड। ईज़िंग फ़ंक्शन ease-out अंत में एनिमेशन को सुचारू रूप से धीमा करता है, एक प्राकृतिक अनुभूति पैदा करता है।

अनुशंसित अभ्यास — प्रत्येक एनिमेटेड गुण के लिए अलग-अलग transition निर्दिष्ट करें। all गुण विकास के दौरान सुविधाजनक है, लेकिन उत्पादन में अप्रत्याशित प्रभावों से बचने के लिए एनिमेशन के लिए विशिष्ट गुण परिभाषित करना बेहतर है।

टच डिवाइस पर होवर

टच डिवाइस पर, होवर की अवधारणा मौजूद नहीं है: कोई कर्सर नहीं है जो किसी तत्व पर होवर कर सके। किसी तत्व पर टैप करना तुरंत क्लिक को सक्रिय करता है, होवर स्थिति को छोड़ते हुए। यह समस्याएँ पैदा करता है यदि इंटरफ़ेस विशेष रूप से होवर पर निर्भर करता है।

StatCounter (2026) के अनुसार, 62% वैश्विक वेब ट्रैफ़िक मोबाइल उपकरणों से आता है। टच स्क्रीन पर होवर की अनुपस्थिति को अनदेखा करने का अर्थ है अधिकांश उपयोगकर्ताओं के लिए 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 नियम (सफलता मानदंड 1.4.13 — होवर या फ़ोकस पर सामग्री): होवर पर दिखाई देने वाली सामग्री फ़ोकस पर भी उपलब्ध होनी चाहिए। यदि होवर अतिरिक्त जानकारी दिखाता है (टूलटिप, ड्रॉपडाउन मेनू), तो वही जानकारी :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 के बिना तुरंत लागू होने चाहिए। यह वेस्टिबुलर विकारों वाले लोगों की मदद करता है।

अतिरिक्त सिफ़ारिशें: महत्वपूर्ण कार्यों के लिए होवर का उपयोग न करें, होवर पर जानकारी देने के लिए केवल रंग पर निर्भर न रहें (एक आइकन या टेक्स्ट जोड़ें) और होवर स्थितियों के लिए पर्याप्त कंट्रास्ट सुनिश्चित करें।