كيفية إخفاء الروابط باستخدام المغلق

يمكن أن يتم إخفاء رابط مع CSS بعدة طرق ، ولكننا سنلقي نظرة على طريقتين يمكن إخفاء عنوان URL تمامًا من خلالها. إذا كنت ترغب في إنشاء بحث عن الزبال أو بيضة عيد الفصح على موقعك ، فهذه طريقة مثيرة لإخفاء الروابط.

الطريقة الأولى هي استخدام "بلا" كقيمة الخاصية CSS للمؤشر - الأحداث. والآخر هو ببساطة عن طريق تلوين النص لتتناسب مع خلفية الصفحة.

ضع في اعتبارك أن أيا من الطريقتين ستجعل الوصلة تختفي تمامًا من العثور عليها عند البحث في شفرة المصدر. ومع ذلك ، لن يكون لدى الزائرين طريقة بسيطة ومباشرة يمكن رؤيتها ، ولن يكون لدى الزوار المبتدئين فكرة عن كيفية العثور على الرابط.

ملاحظة: إذا كنت تبحث عن تعليمات حول كيفية ربط ورقة أنماط خارجية ، فإن هذه الإرشادات ليست ما تبحث عنه. انظر ما هي ورقة الأنماط الخارجية؟ في حين أن.

تعطيل حدث المؤشر

الطريقة الأولى التي يمكننا استخدامها لإخفاء عنوان URL هي جعل الرابط لا يفعل شيئًا. عندما يمر الماوس فوق الرابط ، فلن يعرض ما يشير إليه عنوان URL ولن يسمح لك بالنقر فوقه.

اكتب HTML بشكل صحيح

واحدة من صفحة الويب ، تأكد من قراءة الارتباط التشعبي مثل هذا:

ThoughtCo.com

بالطبع ، "https://www.thoughtco.com/" يحتاج إلى الإشارة إلى عنوان URL الفعلي الذي تريده مخفيًا ، ويمكن تغيير ThoughtCo.com إلى أي كلمة أو عبارة تريدها تصف الارتباط.

الفكرة هنا هي أنه سيتم استخدام الفئة النشطة مع CSS أدناه لإخفاء الارتباط بشكل فعال.

استخدم رمز CSS هذا

يجب أن تتناول شفرة CSS الفئة النشطة وتشرح للمتصفح أن الحدث عند النقر على الرابط ، يجب أن يكون "بلا" ، مثل:

.active {مؤشرات المؤشر: لا شيء؛ المؤشر: الافتراضي }

يمكنك رؤية هذه الطريقة في العمل على JSFiddle. إذا أزلت شفرة CSS هناك ، ثم أعد تشغيل البيانات ، فسيصبح الرابط فجأة قابلاً للنقر والاستعمال. هذا لأنه عندما لا يتم تطبيق CSS ، يتصرف الارتباط بشكل طبيعي.

ملاحظة: تذكر أنه إذا قام المستخدم بمشاهدة شفرة المصدر الخاصة بالصفحة ، فسيرى الرابط ويعرف بالضبط إلى أين تذهب لأننا نرى أعلاه ، لا يزال الرمز موجودًا ، ولكنه غير قابل للاستخدام.

تغيير لون الرابط

عادةً ما يقوم مصمم الويب بعمل ارتباطات تشعبية بلون مختلف عن الخلفية بحيث يمكن للزائرين رؤيتها بالفعل ومعرفة المكان الذي يذهبون إليه. ومع ذلك ، نحن هنا لإخفاء الروابط ، لذلك دعونا نرى كيف لتغيير اللون ليطابق ذلك من الصفحة.

تحديد فئة مخصصة

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

إذا لم نستخدم الفصل الدراسي ، وقمت بدلاً من ذلك بتطبيق CSS من الأسفل إلى كل رابط ، فستختفي جميعها. هذا ليس ما نحن بصدده هنا ، لذلك سنستخدم شفرة HTML هذه التي تستخدم فئة hideme المخصصة:

ThoughtCo.com

معرفة ما لون لاستخدام

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

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

هناك الكثير من أدوات "color picker" أو "eyedropper" المتاحة ، واحدة منها تسمى Colorpick Eyedropper لمتصفح Chrome. استخدمها لتجربة لون خلفية صفحة الويب الخاصة بك للحصول على اللون السداسي.

تخصيص CSS لتغيير اللون

الآن بعد أن يكون لديك اللون الذي يجب أن يكون عليه الرابط ، حان الوقت لاستخدام ذلك وقيمة الفئة المخصصة من أعلاه ، لكتابة شفرة CSS:

.hideme {color: # e6ded1؛ }

إذا كان لون الخلفية بسيطًا مثل الأبيض أو الأخضر ، فلا يلزمك وضع علامة # قبله:

.hideme {لون: أبيض؛ }

انظر كود نموذج هذه الطريقة في JSFiddle هذا.