الصنف ‎:hover

من موسوعة حسوب
< CSS
مراجعة 09:07، 31 أكتوبر 2017 بواسطة عبد اللطيف ايمش (نقاش | مساهمات)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

الصنف الزائف ‎:hover في CSS (أي pseudo-class) يُطابِق العناصر التي يتفاعل المستخدم معها مع جهاز تأشير لكن ليس بالضرورة أن يفعِّلها، ويُفعَّل هذا الصنف الزائف عادةً عندما يمر المستخدم بجهاز التأشير (الفأرة غالبًا) فوق العنصر.

a:hover {
  color: orange;
}

الأنماط المُعرَّفة للصنف الزائف ‎:hover سيتم تجاوزها بأيّة أصناف زائفة تليها خاصة بالروابط (مثل ‎:link أو ‎:active أو ‎:visited) التي لها نفس درجة التحديد. ولتطبيق الأنماط تطبيقًا صحيحًا فضع قاعدة ‎:hover وفق الترتيب ‎:link ثم ‎:visited ثم ‎:hover ثم ‎:active.

لاحظ أنَّ الصنف الزائف ‎:hover له مشاكل في الشاشات اللمسية، فسلوكه يتعمد على المتصفح، فقد لا يُفعَّل الصنف الزائف ‎:hover أبدًا، أو يُفعَّل لبرهة من الزمن بعد لمس العنصر، أو يُفعَّل ويبقى مفعَّلًا حتى يلمس المستخدم عنصرًا آخر.

الشكل العام لهذا المحدد:

:hover

أمثلة

لاحظ كيف سيتغير تنسيق الرابط عندما يستقبل تمر الفأرة فوقه:

<a href="#">Try hovering over this link.</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

مصادر ومواصفات