انٹرفیس میں ہوور: یہ کیا ہے، اثرات کی اقسام اور نفاذ

ویب ڈیزائن میں ہوور کیا ہے

ہوور (انگریزی “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 کے بغیر فورا لاگو ہونے چاہیے۔ یہ وسٹیبیولر عمل کے مریضوں کی مدد کرتا ہے۔

اضافی سفارشات: اہم کمانڈ کے لیے ہوور استعمال نہ کریں، ہوور پر معلومات پہنچانے کے لیے صرف رنگ پر انحصار نہ کریں (آئیکن یا متن شامل کرین، اور ہوور حالتوں کے لیے کافی کنٹراسٹ کو یقینی بنائیں۔