Kā paslēpt saites, izmantojot CSS

Saišu ar CSS slēpšanu var izdarīt vairākos veidos, taču mēs aplūkosim divas metodes, kurās URL var pilnībā apskatīt no skata. Ja vēlaties savā vietnē izveidot sadzīves medības vai lieldienu olu, tas ir interesants veids, kā slēpt saites.

Pirmais veids ir izmantot "none" kā rādītāju notikumu CSS īpašuma vērtību. Otrs ir vienkārši krāsot tekstu, lai tas atbilstu lapas fona krāsai.

Paturiet prātā, ka, izmantojot nevienu no metodēm, avota koda meklēšana neļaus saitei pilnībā izzust. Tomēr apmeklētājiem nebūs vienkāršs, vienkāršs veids, kā to redzēt, un jūsu iesācējiem apmeklētājiem nebūs pamata, kā atrast saiti.

Piezīme: ja jūs meklējat norādījumus par to, kā saistīt ārējo stilu lapu, šīs instrukcijas nav tādas, kā jūs pēc tam. Skatiet, kāds ir ārējais stilu saraksts? tā vietā.

Atspējot rādītāju notikumu

Pirmā metode, kuru mēs varam izmantot, lai paslēptu vietrādi URL, ir padarīt saiti nedarīt neko. Kad peles kursors pāri pār saiti, tas neparādīs, uz ko norāda URL, un tas neļaus jums noklikšķināt uz tā.

Rakstiet HTML pareizi

Viena tīmekļa lapa, pārliecinieties, vai hipersaites teksts ir šāds:

ThoughtCo.com

Protams, "https://www.thoughtco.com/" ir jānorāda uz faktisko URL, kuru vēlaties slēpt, un ThoughtCo.com var tikt mainīts uz jebkuru jūsu vārdu vai frāzi, kas apraksta saiti.

Ideja šeit ir tāda, ka klases aktīvs tiks izmantots ar tālāk norādīto CSS, lai efektīvi paslēptu saiti.

Izmantojiet šo CSS kodu

CSS kodam jārisina aktīvā klase un jāizskaidro pārlūkprogrammai, ka notikumam pēc saites noklikšķināšanas jābūt "nē", piemēram:

.aktīvās {rādītāju notikumi: nav; kursors: noklusējums; }

Šo metodi jūs varat redzēt darbībā JSFiddle. Ja jūs šeit noņemat CSS kodu un pēc tam atkārtoti ievadāt datus, saite pēkšņi kļūst par klikšķināmu un lietojama. Tas ir tāpēc, ka, ja CSS netiek piemērots, saite darbojas normāli.

Piezīme. Atcerieties, ka, ja lietotājs skatās lapas pirmkodu, viņi redzēs saiti un precīzi zinās, kur tas notiek, jo, kā redzams iepriekš, kods joprojām ir pieejams, tas vienkārši nav izmantojams.

Mainīt saites krāsu

Parasti tīmekļa dizainers hipersaites veidos atšķirīgu krāsu nekā fons, lai apmeklētāji to varētu redzēt un uzzināt, kur viņi iet. Tomēr mēs esam šeit, lai paslēptu saites , tāpēc redzēsim, kā mainīt krāsu, lai tā atbilstu lapai.

Noteikt pielāgoto klasi

Ja mēs izmantojam vienu un to pašu piemēru no pirmās iepriekš minētās metodes, mēs varam vienkārši mainīt klasi uz visu, ko mēs gribam, lai paslēptu tikai īpašas saites.

Ja mēs neizmantojām klasi un tā vietā CSS tika izmantota no zemāk uz katru saiti, tad visas tās izzudīs. Tas nav tas, ko mēs esam pēc šeit, tāpēc mēs izmantosim šo HTML kodu, kurš izmanto pielāgoto hideme klasi:

ThoughtCo.com

Uzziniet, kāda krāsa jāizmanto

Pirms mēs ievadām atbilstošo CSS kodu, lai paslēptu saiti, mums jāizprot, kāda krāsa mēs vēlamies izmantot. Ja jums jau ir labs fons, piemēram, balts vai melns, tad tas ir vienkārši. Tomēr citām īpašām krāsām arī jābūt precīzām.

Piemēram, ja jūsu fona krāsai ir e6ded1 hex vērtība, jums jāzina, ka CSS kods pareizi darbojas lapas, kuru vēlaties izzust.

Ir pieejams daudz šo "krāsu atlasītāju" vai "eyedropper" rīku, no kuriem viens Chrome pārlūks sauc par ColorPick Eyedropper. Izmantojiet to, lai atlasītu savas tīmekļa lapas fona krāsu, lai iegūtu sešstūra krāsu.

Pielāgojiet CSS, lai mainītu krāsu

Tagad, kad jums ir krāsa, kurai ir jābūt saitei, ir laiks to izmantot un pielāgoto klases vērtību no augšas, lai rakstītu CSS kodu:

.hideme {color: # e6ded1; }

Ja jūsu fona krāsa ir vienkārša, piemēram, balta vai zaļa, jums nav jāuzliek # zīme pirms tā:

.hideme {krāsa: balta; }

Skatiet šīs metodes parauga kodu šajā JSFiddle.