CSS ilə bir əlaqəni gizlətmək bir sıra yollarla edilə bilər, ancaq URL'nin görünüşündən tamamilə gizlənə biləcək iki üsula baxacağıq. Sitenizde bir zibilçi ovu və ya Pasxa yumurtası yaratmaq istəyirsinizsə, bu əlaqələri gizlətmək üçün maraqlı bir yoldur.
Birincisi, pointer events CSS property value kimi "none" istifadə olunur. Digər, sadəcə, səhifənin fonuna uyğun mətni rənglədir.
Heç bir metodun mənbə kodunu axtararkən əlaqənin tamamilə yox olmasına səbəb olmayacağını unutmayın. Bununla belə, ziyarətçilər onu görmək üçün sadə, asan bir yola malik olmayacaq və sizin təcrübəli qonaqlarınızın linkləri necə tapacağına dair bir ipucu olmayacaq.
Qeyd: Xarici stillər hesabatını necə bağlamaq barədə təlimatlara baxırsınızsa, bu təlimatlar sonra etdiyiniz şey deyil. Xarici Style Şablonu nədir? əvəzinə.
İşaretçi hadisəsini söndürün
Bir URL'yi gizlətmək üçün istifadə edə biləcəyimiz ilk üsul, əlaqəni heç bir şey etməməkdir. Siçan keçid üzərində dolaşırdıqda, bu URL'nin nə üçün göstərdiyini göstərməyəcək və onu tıklamağa imkan verməyəcəkdir.
HTML düzgün yaz
Veb səhifədən birinə kölgə belə oxuyur:
ThoughtCo.comƏlbəttə ki, "https://www.thoughtco.com/" gizli istədiyiniz faktiki URL'yi göstərməlidir və ThoughtCo.com , linki izah etdiyiniz hər hansı bir söz və ya sözcüyə dəyişdirilə bilər.
Buradakı ideya, səmərəli şəkildə əlaqəni gizlətmək üçün sinif aktivinin aşağıdakı CSS ilə istifadə ediləcəyidir.
Bu CSS kodundan istifadə edin
CSS kodu aktif sinifə müraciət etmək və brauzerin linkin üzərindəki hadisəin "heç" olmadığı kimi izah etməsi lazımdır:
.active {pointer-events: none; kursor: default; }JSFiddle-də bu üsulu hərəkətdə görə bilərsiniz. Orada CSS kodunu çıxardıqdan sonra məlumatları yenidən işlətsəniz, link birdən-birə tıklanabilir və istifadə edilə bilər. Bunun səbəbi, CSS tətbiq olunmadığı üçün, link normal davranır.
Qeyd: İstifadəçi səhifənin mənbə kodunu görsəydilər, linkdən istifadə edəcəyik və yuxarıda gördüyümüz kimi kodu hələ də mövcuddur, yalnız istifadə edilə bilməz.
Linkin rəngini dəyişdirin
Normalda, bir veb-dizayner hiperlinkləri fondan fərqli bir rəng təşkil edəcək, belə ki, ziyarətçilər həqiqətən onları görmək və getdikləri yerləri bilirlər. Bununla belə, əlaqələri gizlətmək üçün buradayıq, buna görə də rəngi səhifə ilə uyğunlaşdırmaq üçün necə dəyişə biləcəyik.
Xüsusi Sınıfı təyin edin
Yuxarıdakı ilk üsuldan eyni nümunəni istifadə edərsek, biz sadəcə istədiyimizə görə sinfi dəyişə bilərik ki, yalnız xüsusi əlaqələr gizlənsin.
Bir sinifdən istifadə etmədiyimiz və CSS-dən aşağıda hər bir linkə tətbiq edərdik, onda hamısı yox olacaqdı. Buradan sonra olduğumuz şey deyil, belə ki, xüsusi hideme sinifini istifadə edən bu HTML kodunu istifadə edəcəyik:
ThoughtCo.comRəyin istifadə olunmasını öyrənin
Bağlantıyı gizlətmək üçün müvafiq CSS kodunu daxil etməzdən əvvəl istifadə etmək istədiyimiz rəngləri anlamaq lazımdır. Əgər qara və ya qara kimi zəngin bir fon varsa, onda bu asan. Ancaq digər xüsusi rənglər də dəqiq olmalıdır.
Məsələn, fon rəngi e6ded1-nin hex dəyərinə malikdirsə , bunun CSS kodunun istənməyən səhifəyə düzgün işləməyini bilmək lazımdır.
Mövcud olan "rəng seçici" və ya "damlacıq" vasitələrdən çoxu var, bunlardan biri Chrome brauzeri üçün ColorPick Eyedropper adlanır. Hex rəngini almaq üçün veb-səhifənizin fon rəngini nümunə etmək üçün istifadə edin.
Rəng dəyişdirmək üçün CSS-i fərdiləşdirin
İndi linkin olması lazım olan rəngə sahib olduğunuzda, CSS kodunu yazmaq üçün yuxarıdan xüsusi sinif dəyəri istifadə etmək vaxtıdır:
.hideme {color: # e6ded1; }Əgər fon rənginiz ağ və ya yaşıl kimi sadədirsə, ondan öncə # işarəsi qoymaq olmaz:
.hideme {rəng: ağ; }Bu metodun nümunəvi kodu bu JSFiddle-də baxın.