الصنف :hover
الصنف الزائف :hover في CSS (أي pseudo-class) يُطابِق العناصر التي يتفاعل المستخدم معها مع جهاز تأشير لكن ليس بالضرورة أن يفعِّلها، ويُفعَّل هذا الصنف الزائف عادةً عندما يمر المستخدم بجهاز التأشير (الفأرة غالبًا) فوق العنصر.
a:hover {
color: orange;
}
الأنماط المُعرَّفة للصنف الزائف :hover سيتم تجاوزها بأيّة أصناف زائفة تليها خاصة بالروابط (مثل :link أو :active أو :visited) التي لها نفس درجة التحديد. ولتطبيق الأنماط تطبيقًا صحيحًا فضع قاعدة :hover وفق الترتيب :link ثم :visited ثم :hover ثم :active.
لاحظ أنَّ الصنف الزائف :hover له مشاكل في الشاشات اللمسية، فسلوكه يتعمد على المتصفح، فقد لا يُفعَّل الصنف الزائف :hover أبدًا، أو يُفعَّل لبرهة من الزمن بعد لمس العنصر، أو يُفعَّل ويبقى مفعَّلًا حتى يلمس المستخدم عنصرًا آخر.
الشكل العام لهذا المحدد:
:hover
أمثلة
لاحظ كيف سيتغير تنسيق الرابط عندما يستقبل تمر الفأرة فوقه:
<a href="#">حاول المرور فوق هذا الرابط</a>
شيفرة CSS:
a {
background-color: powderblue;
transition: background-color .5s;
}
a:hover {
background-color: gold;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | مدعومة | مدعومة | 7.0 | 4.0 | 2.0.4 |
انظر أيضًا
- صفحة الصنف الزائف
focus:الذي يُمثِّل عنصرًا (مثل عناصر النماذج) الذي استقبل التركيز (foucs). - صفحة الصنف الزائف
focus-within:الذي يُمثِّل عنصرًا (مثل عناصر النماذج) التي استقبل التركيز (foucs) أو احتوى على عنصر قد استقبل التركيز.
مصادر ومواصفات
- معيار HTML Living Standard.
- مسودة Selectors Level 4.
- مواصفة Selectors Level 3.
- مواصفة CSS Level 2 (Revision 1).