Ascunderea unui link cu CSS se poate face în mai multe moduri, dar vom examina două metode în care o adresă URL poate fi complet ascunsă. Dacă doriți să creați o vânătoare de scafandru sau un ou de Paști pe site-ul dvs., acesta este un mod interesant de a ascunde legăturile.
Prima modalitate este folosirea "none" ca valoare a proprietății CSS a indicatorului-evenimente. Cealaltă este prin simpla colorare a textului pentru a se potrivi cu fundalul paginii.
Rețineți că niciuna din metode nu va face ca linkul să dispară în totalitate de la a fi găsit la căutarea codului sursă. Cu toate acestea, vizitatorii nu vor avea o modalitate simplă și directă în care să o vadă, iar vizitatorii tăi novici nu vor avea nici o idee despre cum să găsești legătura.
Notă: Dacă căutați instrucțiuni despre cum să conectați o foaie de stil externă, aceste instrucțiuni nu sunt cele pe care le urmați. Vedeți ce foaie de stil externă? in schimb.
Dezactivați evenimentul Pointer
Prima metodă pe care o putem folosi pentru a ascunde o adresă URL este de a face linkul să nu facă nimic. Atunci când mouse-ul se deplasează peste link, nu va arăta la ce indică adresa URL și nu vă va lăsa să faceți clic pe ea.
Scrieți HTML corect
Într-o pagină web, asigurați-vă că hyperlink-ul citește astfel:
ThoughtCo.comDesigur, "https://www.thoughtco.com/" trebuie să indice URL-ul real pe care doriți să îl ascundeți , iar ThoughtCo.com poate fi modificat la orice cuvânt sau expresie care vă place care descrie linkul.
Ideea este că clasa activă va fi utilizată cu CSS de mai jos pentru a ascunde eficient linkul.
Utilizați acest cod CSS
Codul CSS trebuie să abordeze clasa activă și să explice browserului că evenimentul care apare la clic pe link, ar trebui să fie "nici unul", cum ar fi:
.activă {pointer-events: none; cursor: implicit; }Puteți vedea această metodă în acțiune peste la JSFiddle. Dacă eliminați codul CSS acolo și apoi reluați datele, linkul devine brusc clic și utilizabil. Acest lucru se datorează faptului că atunci când CSS nu este aplicat, legătura se comportă normal.
Notă: Amintiți-vă că dacă utilizatorul vizualizează codul sursă al paginii, acesta va vedea linkul și va ști exact unde se află, deoarece, așa cum vedeți mai sus, codul este încă acolo, pur și simplu nu este utilizabil.
Modificați culoarea legăturii
În mod normal, un web designer va face ca hiperlegăturile să aibă o culoare diferită de fundal, astfel încât vizitatorii să le poată vedea și să știe unde se află. Cu toate acestea, suntem aici pentru a ascunde link-uri , așa că hai să vedem cum să schimbăm culoarea pentru a se potrivi cu cea a paginii.
Definirea unei clase personalizate
Dacă vom folosi același exemplu din prima metodă de mai sus, putem schimba pur și simplu clasa la ceea ce dorim, astfel încât numai legăturile speciale să fie ascunse.
Dacă nu am folosi o clasă și am aplicat CSS de mai jos pentru fiecare legătură, atunci toate ar dispărea. Nu suntem aici, deci vom folosi acest cod HTML care folosește clasa hideme personalizată:
ThoughtCo.comAflați ce culoare să utilizați
Înainte de a introduce codul CSS corespunzător pentru a ascunde linkul, trebuie să ne dăm seama ce culoare dorim să folosim. Dacă aveți deja un fundal solid, cum ar fi alb sau negru, atunci este ușor. Cu toate acestea, alte culori speciale trebuie să fie exacte.
De exemplu, dacă culoarea de fundal are o valoare hexagonală a e6ded1 , trebuie să știți că pentru ca codul CSS să funcționeze corect pentru pagina pe care doriți să o dispară.
Există o mulțime de instrumente de "colorare" sau "eyedropper" disponibile, dintre care unul se numește ColorPick Eyedropper pentru browserul Chrome. Utilizați-l pentru a preleva culoarea de fundal a paginii dvs. web pentru a obține culoarea hexagonală.
Personalizați CSS pentru a schimba culoarea
Acum, dacă aveți culoarea pe care link-ul ar trebui să fie, este timpul să folosiți acea valoare și valoarea de clasă personalizată de mai sus pentru a scrie codul CSS:
.hideme {culoare: # e6ded1; }Dacă culoarea de fundal este simplă ca albul sau verde, nu trebuie să puneți semnul # înainte:
.hideme {culoare: alb; }Vedeți codul eșantion al acestei metode în acest JSFiddle.