الفرق بين المراجعتين لصفحة: «CSS/:hover»

المراجعة الحالية بتاريخ 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)‎.

@@ سطر 15: / سطر 15: @@
 لاحظ كيف سيتغير تنسيق الرابط عندما يستقبل تمر الفأرة فوقه:
 <syntaxhighlight lang="html">
-<a href="#">Try hovering over this link.</a>
+<a href="#">حاول المرور فوق هذا الرابط</a>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
@@ سطر 43: / سطر 43: @@
 |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].