الصنف ‎: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)‎.