CSS-dan foydalangan holda havolalarni qanday yashirish kerak

CSS bilan bog'lanishni yashirishning bir qator usullari mavjud bo'lishi mumkin, lekin biz URLni to'liq ko'rinishda yashirish mumkin bo'lgan ikkita usulni ko'rib chiqamiz. Agar saytingizda cho'chqa go'shtini ovlash yoki Pasxa tuxumini yaratmoqchi bo'lsangiz, bu aloqalarni yashirishning qiziqarli usuli.

Birinchidan, "none" so'zidan foydalanib, poisk-events CSS property value. Ikkinchidan, matnni sahifaning orqa foniga mos keladigan tarzda bo'yash.

Hech qanday usulda manba kodini qidirishda aloqadan butunlay yo'qolishini unutmang. Biroq, mehmonlar uni ko'rishning sodda, oddiy usullariga ega bo'lmaydilar va sizning yangi tashrif buyuruvchilaringiz havolani qanday qilib topish mumkinligini bilishmaydi.

Eslatma: Agar siz tashqi uslublar jadvalini qanday ulash bo'yicha ko'rsatmalar izlayotgan bo'lsangiz, ushbu ko'rsatmalar keyinchalik nima qilganingiz emas. Tashqi uslublar varag'ini qanday ko'rish mumkin? Buning o'rniga.

Pointer hodisasini o'chirib qo'yish

URL manzilini yashirish uchun ishlatishimiz mumkin bo'lgan birinchi usuli, havolani hech narsa qilmaslikdir. Sichqoncha havoladan o'tib ketganda, URL manzilini ko'rsatganini ko'rsatmaydi va siz uni bosishingizga ruxsat bermaydi.

HTMLni to'g'ri yozing

Veb-sahifalardan biri shuki, ko'prik quyidagicha o'qiydi:

ThoughtCo.com

Albatta, "https://www.thoughtco.com/" yashirishni istagan haqiqiy URLga ishora qilishi kerak va ThoughtCo.com sizning bog'lanishingiz haqidagi har qanday so'z yoki iboraga o'zgartirilishi mumkin.

Bu erda fikrni faollashtirgan holda, sinf faoli quyidagi CSS bilan foydalaniladi.

Ushbu CSS kodidan foydalaning

CSS kodi faol sinfga murojaat qilish va brauzerda havolani bosish bilan bog'liq voqeaning "yo'q" bo'lishi kerakligini tushuntirishi kerak:

.active {pointer-events: none; kursor: default; }

Ushbu usulni JSFiddle-da bajarishingiz mumkin. Agar u erda CSS kodini olib tashlasangiz va ma'lumotlarni qayta ishga tushirsangiz, havola birdaniga tıklanabilir va foydalanishga mos bo'ladi. Buning sababi, CSS qo'llanilmaganda, ulanish odatdagidek harakat qiladi.

Eslatma: agar foydalanuvchi sahifa manba kodini ko'rsatsa, ular havolani ko'radi va aniq qayerda qayerda ekanligini bilib oling, chunki yuqorida ko'rib turganimizdek, kod hali ham mavjud, u faqat foydalanishga yaroqli emas.

Bog'ning rangini o'zgartiring

Odatda, veb-uslubchisi ko'prikni fondan boshqa rangga aylantiradi, shunda mehmonlar aslida ularni ko'rishlari va qaerga ketishini bilishlari mumkin. Biroq, biz bog'larni yashirish uchun bu erga keldik, shuning uchun rangni sahifaning ma`lumotlariga mos kelishini qanday qilib o'zgartirishni ko'rib chiqamiz.

Maxsus sinfni belgilang

Agar biz yuqoridagi birinchi usuldan bir xil misolni ishlatsak, biz faqat sinfni o'zimiz xohlagan narsaga o'zgartirishimiz mumkin, shunchaki maxsus havolalar yashiriladi.

Agar biz birorta sinfdan foydalanmasak va CSS-dan har bir bog'dan pastga tushirsak, unda ularning hammasi yo'qoladi. Biz bu yerdan keyin nima bo'lganimiz yo'q, shuning uchun maxsus hidma klassini ishlatadigan ushbu HTML kodini ishlatamiz:

ThoughtCo.com

Qaysi rangni ishlatishni bilib oling

Ulanishni yashirish uchun tegishli CSS kodini kiritmasimizdan oldin, biz qaysi rangni ishlatishni istayotganini aniqlashimiz kerak. Agar siz allaqachon oq yoki qora rangli foningiz bo'lsa, unda bu oson. Biroq, boshqa maxsus ranglar ham aniq bo'lishi kerak.

Misol uchun, sizning fon rangingiz e6ded1 ning hex qiymatiga ega bo'lsa , siz buni CSS kodi siz istagan sahifa uchun to'g'ri ishlashi uchun bilishingiz kerak.

Mavjud bo'lgan bu "rang tanlash" yoki "tomoshabop" vositalar ko'p, ulardan biri Chrome brauzeri uchun ColorPick Eyedropper deb ataladi. Olingan rangni olish uchun veb-sahifangizning fon rangini namuna olish uchun foydalaning.

Rangni o'zgartirish uchun CSS-ni moslashtiring

Sizning bog'lanishingizning rangi bor ekan, yuqorida keltirilgan kodni va CSS kodini yozish uchun maxsus sinf qiymatini ishlatish vaqti keldi:

.hideme {color: # e6ded1; }

Agar orqa fon rangi oq yoki yashil kabi oddiy bo'lsa, siz oldin # belgisini qo'yish shart emas:

.hideme {rangi: oq; }

Ushbu usulning misol kodini ushbu JSFiddle-ga qarang.