כיצד להסתיר קישורים באמצעות

הסתרת קישור עם CSS יכולה להיעשות במספר דרכים, אך נבחן שתי שיטות שבהן כתובת אתר יכולה להיות מוסתרת לחלוטין מהתצוגה. אם אתה רוצה ליצור ציד נבלות או ביצה פסחא באתר שלך, זוהי דרך מעניינת להסתיר קישורים.

הדרך הראשונה היא באמצעות "none" כערך המאפיין CSS של המצביע-אירועים. השני הוא פשוט על ידי צביעת הטקסט כדי להתאים את הרקע של הדף.

זכור כי אף אחת מהשיטות לא תהפוך את הקישור ליעלם לחלוטין מהמצאתו בעת חיפוש קוד המקור. עם זאת, המבקרים לא תהיה פשוטה, פשוטה דרך לראות את זה, ואת המבקרים טירון לא יהיה מושג איך למצוא את הקישור.

הערה: אם אתה מחפש הוראות כיצד לקשר גיליון סגנונות חיצוני, הוראות אלה אינן מה שאתה רוצה. ראה איזה גיליון סגנונות חיצוני? במקום זאת.

השבת את האירוע המצביע

השיטה הראשונה שבה אנו יכולים להשתמש כדי להסתיר כתובת אתר היא להפוך את הקישור לעשות כלום. כאשר העכבר מרחף מעל הקישור, הוא לא יציג את מה שכתובת האתר מצביעה עליו והוא לא ייתן לך ללחוץ עליו.

כתוב את ה- HTML כהלכה

אחד את דף האינטרנט, ודא את הקישור קורא ככה:

ThoughtCo.com

כמובן, "https://www.thoughtco.com/" צריך להצביע על כתובת האתר בפועל שאתה רוצה מוסתר, ThoughtCo.com ניתן לשנות את כל מילה או ביטוי שאתה אוהב את זה מתאר את הקישור.

הרעיון כאן הוא כי בכיתה פעיל ישמש עם CSS להלן ביעילות להסתיר את הקישור.

השתמש בקוד CSS זה

קוד ה- CSS צריך לטפל במחלקה הפעילה ולהסביר לדפדפן שהאירוע בלחיצה על הקישור צריך להיות "ללא", כך:

.active {pointer-events: none; הסמן: ברירת מחדל; }

ניתן לראות שיטה זו בפעולה ב- JSFiddle. אם תסיר את קוד ה- CSS, ולאחר מכן תעביר מחדש את הנתונים, הקישור יהפוך פתאום ללחיצה וניתן לשימוש. הסיבה לכך היא שכאשר CSS אינו מוחל, הקישור מתנהג כרגיל.

הערה: זכור שאם המשתמש מציג את קוד המקור של הדף, הוא יראה את הקישור ויידע בדיוק לאן הוא הולך, כי כמו שאנחנו רואים למעלה, הקוד עדיין שם, זה פשוט לא שמיש.

שנה את צבע הקישור

בדרך כלל, מעצב אינטרנט יעשה קישורים בצבע שונה מאשר ברקע, כך שהמבקרים יכולים לראות אותם ולדעת לאן הם הולכים. עם זאת, אנחנו כאן כדי להסתיר קישורים , לכן נראה כיצד לשנות את הצבע כך שיתאים לדף.

הגדר מחלקה מותאמת אישית

אם נשתמש בדוגמה זהה מהשיטה הראשונה לעיל, אנחנו יכולים פשוט לשנות את הכיתה לכל מה שאנחנו רוצים, כך שרק קישורים מיוחדים מוסתרים.

אם לא היינו משתמשים בכיתה, במקום להחיל את ה- CSS מלמטה על כל קישור, כולם היו נעלמים. זה לא מה שאנחנו כאן, אז נשתמש בקוד HTML זה באמצעות מחלקה מותאמת אישית hideme:

ThoughtCo.com

גלה איזה צבע להשתמש

לפני שנכנס קוד CSS המתאים כדי להסתיר את הקישור, אנחנו צריכים להבין איזה צבע אנחנו רוצים להשתמש. אם יש לך רקע מוצק כבר, כמו לבן או שחור, אז זה קל. עם זאת, צבעים מיוחדים אחרים צריכים להיות מדויקים מדי.

לדוגמה, אם צבע הרקע שלך יש ערך hex של e6ded1 , אתה צריך לדעת כי קוד CSS לעבוד כמו שצריך עבור הדף אתה רוצה שזה ייעלם.

יש הרבה כלים אלה "צבע בורר" או "טפטפת" זמין, אחד מהם נקרא ColorPick טפטפת עבור דפדפן Chrome. השתמש בו כדי לדגום את צבע הרקע של דף האינטרנט שלך כדי לקבל את צבע הקסדצימלי.

התאם אישית את ה- CSS כדי לשנות את הצבע

עכשיו שיש לך את הצבע כי הקישור צריך להיות, זה הזמן להשתמש בו ואת הערך בכיתה מותאמת אישית מלמעלה, לכתוב את קוד ה- CSS:

.hideme {color: # e6ded1; }

אם צבע הרקע שלך פשוט כמו לבן או ירוק, אתה לא צריך לשים את הסימן # לפני זה:

.hideme {צבע: לבן; }

עיין בקוד לדוגמה של שיטה זו ב- JSFiddle זה.