هاور در رابط‌ها: چیست، انواع افکت‌ها و پیاده‌سازی

هاور در طراحی وب چیست

هاور (از انگلیسی hover — معلق بودن) — واکنش بصری المان رابط به بردن نشانگر ماوس روی آن. این اصطلاح هم برای اشاره به خود شبه‌کلاس :hover در CSS و هم برای وضعیت المان هنگام نشانه‌روی استفاده می‌شود.

مفهوم هاور در رابط‌های گرافیکی اولیه Xerox Alto (1973) ظاهر شد و با ظهور CSS2 در سال 1998 در وب استاندارد شد. از آن زمان هاور به بخشی جدایی‌ناپذیر از تجربه کاربری در رایانه‌های رومیزی تبدیل شد.

طبق CSS Usage Statistics (2025)، ۹۴٪ از سایت‌های برتر ۱۰۰۰ حداقل برای یک المان از شبه‌کلاس :hover استفاده می‌کنند. هاور بیشتر برای دکمه‌ها (۸۹٪)، پیوندها (۸۵٪) و کارت‌ها (۶۲٪) استفاده می‌شود.

تفاوت هاور با سایر حالت‌ها

هاور ≠ active. :hover با نشانه‌روی، :active در لحظه کلیک فعال می‌شود. :focus با تمرکز از طریق صفحه‌کلید فعال می‌شود. هر حالت وظیفه خود را حل می‌کند. هاور پیش‌نمایش است، active تأیید عمل است.

شبه‌کلاس :hover در CSS

شبه‌کلاس :hover در CSS زمانی که کاربر نشانگر ماوس را روی المان می‌برد، استایل‌هایی به آن اعمال می‌کند. با هر المان 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 مانند کلاس است (۱,۰,۰). اگر نیاز به بازنویسی هاور برای یک المان خاص دارید، از انتخاب‌گری با ویژگی بالاتر استفاده کنید. ترتیب اعلام مهم است: اگر :hover بعد از :focus اعلام شود، هاور ممکن است در حالت تمرکز کار نکند.

شبه‌کلاس‌های ترکیبی

:hover را می‌توان با شبه‌کلاس‌های دیگر ترکیب کرد برای ایجاد منطق پیچیده. مثلاً .card:hover .card__title استایل عنوان داخل کارت را با نشانه‌روی روی کل کارت تغییر می‌دهد. این امکان ایجاد افکت‌های با انیمیشن تو در تو را فراهم می‌کند.

انواع افکت‌های hover

افکت‌های hover بر اساس نوع ویژگی تغییر داده شده به چند دسته تقسیم می‌شوند. هر نوع برای سناریوهای خاصی مناسب است و احساس خاصی در کاربر ایجاد می‌کند.

موثرترین نوع — ترکیب افکت رنگی و سایه. Material Design استفاده از تغییر ارتفاع سایه را به عنوان نوع اصلی بازخورد hover توصیه می‌کند.

طبق Google Material Design (2024)، افکت hover باید قابل توجه باشد اما حواس‌پرت‌کننده نباشد. مدت زمان پیشنهادی انیمیشن ۲۰۰–۳۰۰ میلی‌ثانیه است. افکت‌های خیلی سریع (کمتر از ۱۰۰ میلی‌ثانیه) ممکن است دیده نشوند، خیلی کند (بیش از ۵۰۰ میلی‌ثانیه) کاربر را آزار می‌دهند.

انتقال‌های CSS برای افکت‌های نرم

ویژگی transition در CSS افکت‌های hover را نرم می‌کند و تغییر ویژگی‌ها را در طول زمان انیمیشن می‌کند. بدون 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 به بافت بستگی دارد. برای المان‌های کوچک (آیکون‌ها، پیوندها) — ۱۵۰–۲۰۰ میلی‌ثانیه. برای المان‌های بزرگ (کارت‌ها، پنجره‌های مودال) — ۲۵۰–۳۵۰ میلی‌ثانیه. تابع easing ease-out انیمیشن را به آرامی در انتها کند می‌کند و حس طبیعی ایجاد می‌کند.

روش پیشنهادی — transition را برای هر ویژگی متحرک جداگانه مشخص کنید. ویژگی all در مرحله توسعه راحت است، اما در تولید بهتر است ویژگی‌های خاص برای انیمیشن تعریف شوند تا از افکت‌های غیرمنتظره جلوگیری شود.

هاور در دستگاه‌های لمسی

در دستگاه‌های لمسی مفهوم هاور وجود ندارد: هیچ نشانگری برای بردن روی المان نیست. لمس المان بلافاصله click را فعال می‌کند و حالت هاور را نادیده می‌گیرد. این مشکل‌ساز می‌شود اگر رابط کاربری صرفاً به هاور متکی باشد.

طبق StatCounter (2026)، ۶۲٪ از ترافیک وب جهانی از دستگاه‌های موبایل است. نادیده گرفتن نبود هاور در صفحه‌نمایش‌های لمسی یعنی از دست دادن کنترل بر UX برای اکثر کاربران.

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

درخواست رسانه‌ای hover: none امکان تشخیص دستگاه‌هایی که نشانه‌روی را پشتیبانی نمی‌کنند فراهم می‌کند. در چنین دستگاه‌هایی افکت‌های hover غیرفعال شده و تعامل بر اساس حالت‌های :active و :focus انجام می‌شود. راه‌حل جایگزین — نمایش محتوای hover با لمس (لمس اول هاور را نشان می‌دهد، لمس دوم عمل را انجام می‌دهد)، اما این الگو UX را بدتر می‌کند.

دسترسی‌پذیری افکت‌های hover

دسترسی‌پذیری هاور — جنبه حیاتی که اغلب نادیده گرفته می‌شود. کاربرانی که رابط را با صفحه‌کلید کنترل می‌کنند نمی‌توانند :hover را فعال کنند. کارکردهایی که فقط از طریق هاور در دسترس هستند برای آن‌ها غیرقابل دسترس می‌شود.

قانون WCAG 2.2 (معیار موفقیت ۱.۴.۱۳ — محتوا در هاور یا تمرکز): محتوایی که با هاور ظاهر می‌شود باید در حالت تمرکز نیز در دسترس باشد. اگر هاور اطلاعات اضافی (راهنما، منوی کشویی) نشان می‌دهد، همان اطلاعات باید با :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 — به تنظیمات سیستمی کاربران احترام بگذارید. اگر کاربر انیمیشن را در سیستم غیرفعال کرده است، افکت‌های hover باید فوری و بدون transition اعمال شوند. این به افراد با اختلالات دهلیزی کمک می‌کند.

توصیه‌های اضافی: از هاور برای کارکردهای حیاتی استفاده نکنید، فقط از رنگ برای انتقال اطلاعات در هاور استفاده نکنید (آیکون یا متن اضافه کنید) و تضاد کافی برای حالت‌های hover فراهم کنید.