التمرير في الواجهات: ما هو، أنواع التأثيرات والتطبيق

ما هو التمرير في تصميم الويب

التمرير (من الإنجليزية “to hover”) — رد فعل بصري لعنصر الواجهة عندما يكون مؤشر الفأرة فوقه. يستخدم المصطلح للإشارة إلى كل من الفئة الزائفة CSS :hover وحالة العنصر عند التمرير.

نشأ مفهوم التمرير في الواجهات الرسومية المبكرة لـ Xerox Alto (1973) وتم توحيده على الويب مع ظهور CSS2 في 1998. ومنذ ذلك الحين، أصبح التمرير جزءاً لا يتجزأ من تجربة المستخدم على سطح المكتب.

وفقاً لـ CSS Usage Statistics (2025)، 94% من المواقع في أفضل 1000 تستخدم الفئة الزائفة :hover لعنصر واحد على الأقل. يتم تطبيق التمرير بشكل شائع على الأزرار (89%)، الروابط (85%) والبطاقات (62%).

الفرق بين التمرير والحالات الأخرى

التمرير ≠ 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 هي نفس خصوصية الفئة (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% من حركة مرور الويب العالمية تأتي من الأجهزة المحمولة. تجاهل غياب التمرير على الشاشات اللمسية يعني فقدان التحكم في تجربة المستخدم لغالبية المستخدمين.

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

استعلام الوسائط hover: none يسمح باكتشاف أن الجهاز لا يدعم التمرير. على هذه الأجهزة، يتم تعطيل تأثيرات التمرير ويتم التفاعل بناءً على حالتي :active و :focus. حل بديل هو إظهار محتوى التمرير عند اللمس (اللمسة الأولى تظهر التمرير، اللمسة الثانية تنفذ الإجراء)، لكن هذا النمط يضعف تجربة المستخدم.

إمكانية الوصول لتأثيرات التمرير

إمكانية الوصول للتمرير هي جانب حاسم غالباً ما يتم تجاهله. المستخدمون الذين يتنقلون في الواجهة بلوحة المفاتيح لا يمكنهم تفعيل :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. هذا يساعد الأشخاص الذين يعانون من اضطرابات دهليزية.

توصيات إضافية: لا تستخدم التمرير للوظائف الحرجة، لا تعتمد فقط على اللون لنقل المعلومات عند التمرير (أضف أيقونة أو نص) وتأكد من تباين كافٍ لحالات التمرير.