ইন্টারফেসে হোভার: এটি কী, ইফেক্টের প্রকার ও বাস্তবায়ন

ওয়েব ডিজাইনে হোভার কী

হোভার (ইংরেজি “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 ছাড়া তাৎক্ষণিকভাবে প্রয়োগ হওয়া উচিত। এটি ভেস্টিবুলার ডিজঅর্ডারে আক্রান্ত ব্যক্তিদের সাহায্য করে।

অতিরিক্ত সুপারিশ: গুরুত্বপূর্ণ ফাংশনের জন্য হোভার ব্যবহার করবেন না, হোভারে তথ্য জানাতে শুধুমাত্র রঙের উপর নির্ভর করবেন না (একটি আইকন বা টেক্সট যোগ করুন) এবং হোভার অবস্থার জন্য পর্যাপ্ত কনট্রাস্ট নিশ্চিত করুন।