الفرق بين المراجعتين لصفحة: «CSS/:hover»
لا ملخص تعديل |
لا ملخص تعديل |
||
سطر 43: | سطر 43: | ||
|2.0.4 | |2.0.4 | ||
|} | |} | ||
==انظر أيضًا== | |||
* صفحة الصنف الزائف <code>[[CSS/:focus|focus:]]</code> الذي يُمثِّل عنصرًا (مثل عناصر النماذج) الذي استقبل التركيز (foucs). | |||
* صفحة الصنف الزائف <code>[[CSS/:focus-within|focus-within:]]</code> الذي يُمثِّل عنصرًا (مثل عناصر النماذج) التي استقبل التركيز (foucs) أو احتوى على عنصر قد استقبل التركيز. | |||
==مصادر ومواصفات== | ==مصادر ومواصفات== | ||
*معيار [https://html.spec.whatwg.org/multipage/scripting.html#selector-hover HTML Living Standard]. | *معيار [https://html.spec.whatwg.org/multipage/scripting.html#selector-hover HTML Living Standard]. |
المراجعة الحالية بتاريخ 10:39، 21 أكتوبر 2018
الصنف الزائف :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).