شرح محدد التحويم في CSS (مع مثال)

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

عندما تستخدم لوصلات النمط، :hoverوغالبا ما يقترن :link، :visitedو :activeمحددات التي لم تسبق زيارتها النمط، زار، وروابط نشطة، على التوالي.

إذا :linkو :visitedالقواعد هي في تعريف CSS، :hoverينبغي أن تقع بعدهم. وإلا ، :hoverفلن يتم تطبيق الأنماط الموجودة في القاعدة على العنصر المحدد.

بناء الجملة:

a:hover { /* CSS declarations */ }

يطبق محدد التمرير الأنماط المتوفرة في القاعدة فقط عندما يدخل عنصر في حالة التمرير. يحدث هذا عادةً عندما يمرر المستخدم الماوس فوق العنصر.

button { color: white; background-color: green; } button:hover { background-color: white; border: 2px solid green; color: green; }

في المثال أعلاه ، يكون النمط العادي للزر عبارة عن نص أبيض على زر أخضر. عندما يقوم المستخدم بالتمرير بالماوس فوق الزر ، :hoverستصبح القاعدة مع المحدد نشطة وسيتغير نمط الزر.

لاحظ أن هذا :hoverقد يكون مشكلة على شاشات اللمس - يمكن أن تتسبب تطبيقات الأجهزة المختلفة ومتصفح الجوال في تشغيل الفئة الزائفة في بعض الحالات وليس في حالات أخرى. تأكد من اختبار العناصر بدقة باستخدام :hoverأكبر عدد ممكن من متصفحات وأجهزة الجوال المختلفة.