خدعة CSS لتعطيل الروابط

المشكلة:

هل من الممكن تعطيل الروابط باستخدام CSS؟ على سبيل المثال، إذا كان لديك فصل دراسي يسمى "الصفحة الحالية"، فقد ترغب في منع الروابط الخاصة بهذا الفصل من أن تكون نشطة عند النقر عليها.

الحل:

يقدم مقتطف كود CSS التالي حلاً بسيطًا:

[aria-current="page"] { أحداث المؤشر: لا شيء؛ المؤشر: افتراضي؛ زخرفة النص: لا شيء؛ اللون: أسود؛

[aria-current="page"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

يستهدف هذا الرمز العناصر ذات السمة "aria-current='page'" ويعطل تفاعلها عن طريق تعيين "pointer-events" على "none". كما أنه يزيل نمط الارتباط النموذجي عن طريق تعيين "المؤشر" على "افتراضي"، وإزالة زخرفة النص، وإعادة تعيين لون النص إلى الأسود.

لتطبيق هذا الحل في HTML، يمكنك تعديل الرابط الخاص بك على النحو التالي:

الرابط

[aria-current="page"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

سيؤدي هذا إلى تعطيل الرابط ومنعه من أن يكون قابلاً للنقر عليه عندما يكون "- الصفحة "الطبقة هي مُطبَّق.