عند بناء صفحات الويب قد ترغب أحيانًا في أن يظهر رابط ارتساء (<a>) دون أن يعمل. ربما ما زلت تعمل على ذلك القسم من الموقع، أو أن الرابط للزينة فقط. أيًّا كان السبب، جعل الارتساء غير قابل للنقر أمر بسيط ببعض قواعد CSS.
مقتطف الشيفرة
لنبدأ بمقتطف سريع يجعل وسم الارتساء غير قابل للنقر:
<a href="#" class="inactive-link">Unclickable Link</a>
ثم أضف في CSS الأنماط التالية:
.inactive-link {
pointer-events: none;
cursor: default;
}
حالة استخدام
لنفترض أن لديك قائمة تنقل، لكن إحدى الصفحات قيد الإنشاء. تريد أن يبقى الرابط ظاهرًا لاتساق التصميم، دون أن يتفاعل الزوار معه. إليك مثالًا:
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="#" class="inactive-link">Contact (Coming Soon)</a></li>
</ul>
</nav>
الخلاصة
بسطرين فقط من CSS يمكنك جعل أي وسم ارتساء غير قابل للنقر. إنها طريقة سريعة وفعّالة لإدارة الروابط غير النشطة أو المؤقتة. جرّب هذه التقنية في المرة التالية التي تحتاج فيها رابطًا ظاهرًا بلا وظيفة.