الفرق بين المراجعتين ل"CSS/:hover"
| (مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين) | |||
| سطر 15: | سطر 15: | ||
لاحظ كيف سيتغير تنسيق الرابط عندما يستقبل تمر الفأرة فوقه: | لاحظ كيف سيتغير تنسيق الرابط عندما يستقبل تمر الفأرة فوقه: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| − | <a href="#"> | + | <a href="#">حاول المرور فوق هذا الرابط</a> |
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
| سطر 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]. | ||
| سطر 48: | سطر 52: | ||
*مواصفة [https://drafts.csswg.org/selectors-3/#the-user-action-pseudo-classes-hover-act Selectors Level 3]. | *مواصفة [https://drafts.csswg.org/selectors-3/#the-user-action-pseudo-classes-hover-act Selectors Level 3]. | ||
*مواصفة [http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes CSS Level 2 (Revision 1)]. | *مواصفة [http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes CSS Level 2 (Revision 1)]. | ||
| − | [[تصنيف:CSS]] | + | [[تصنيف:CSS|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS Selectors]] | + | [[تصنيف:CSS Selectors|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS pseudo-class]] | + | [[تصنيف:CSS pseudo-class|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 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).