القناع :active CSS

التعريف والاستخدام

CSS :active يستخدم الكائنات الوهمية لاختيار وتعيين أنماط العناصر التي يتم تحفيزها من قبل المستخدم.

:active يستخدم الكائنات الوهمية غالبًا <a> و <button> عنصر. عند النقر على رابط، يصبح الرابط نشطًا؛ الزر أيضًا.

نصيحة:استخدام :link ضبط أنماط الروابط لموقع لم يتم زيارتة، باستخدام :visited ضبط أنماط الروابط لموقع تم زيارتة، باستخدام :hover ضبط أنماط الروابط عند العائم بالفأرة.

ملاحظة:في التعريفات CSS،:active يجب أن يتم وضعها :hover(! إذا كان موجودًا) قبل أن يبدأ التطبيق!

مثال

مثال 1

اختر وضبط أنماط الروابط النشطة:

a:active {
  background-color: yellow;
}

جرب بنفسك

مثال 2

اختر وضبط أنماط الزر عند النقر:

button:active {
  background-color: pink;
}

جرب بنفسك

مثال 3

اختر وضبط أنماط العناصر <p>، <h1> و <a> عند النقر:

p:active, h1:active, a:active {
  background-color: yellow;
}

جرب بنفسك

مثال 4

اختر وضبط أنماط الروابط غير المزورعة، المزورعة، العائمة والنشطة:

/* رابط لم يتم زيارتة */
a:link {
  color: green;
}
/* رابط تم زيارتة */
a:visited {
  color: green;
}
/* رابط عائم بالفأرة */
a:hover {
  color: red;
}
/* رابط نشط */
a:active {
  color: yellow;
}

جرب بنفسك

مثال 5

ضبط أنماط الروابط المختلفة:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

جرب بنفسك

نحو الأسلوب CSS

:active {
  إعلانات css;
}

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يحدد إصدار المتصفح الأول الذي يدعم هذا الكائن الوهمي بشكل كامل.

الصفحات ذات الصلة

دليل:رابط CSS

دليل:زر CSS

دليل:CSS الكائنات الوهمية