Skrivanje povezave s CSS je mogoče storiti na več načinov, vendar bomo preučili dva načina, na katerih je URL mogoče popolnoma skriti pred ogledom. Če želite na svojem spletnem mestu ustvariti lov na lovca ali velikonočno jajce, je to zanimiv način za skrivanje povezav.
Prvi način je, da uporabite vrednost »nič« kot vrednost kazalčne vrednosti CSS. Druga je preprosto obarvanje besedila, da se ujema z ozadjem strani.
Upoštevajte, da nobena metoda ne bo popolnoma izginila povezave med iskanjem izvorne kode. Vendar pa obiskovalci ne bodo imeli preprostega, preprostega načina, da bi ga videli, obiskovalci novic pa ne bodo imeli pojma, kako najti povezavo.
Opomba: če iščete navodila za povezavo zunanjega slognega lista, ta navodila niso tista, za katera sledite. Glejte Kaj je zunanji slog? namesto tega.
Onemogočite kazalčni dogodek
Prva metoda, s katero lahko skrijemo URL, je, da povezava ne naredi ničesar. Ko se miška lebdi nad povezavo, ne bo prikazala, na kakšen URL kaže in ne bo vam dovolila, da jo kliknete.
Napišite HTML pravilno
Eno spletno stran, poskrbite, da se hiperpovezava glasi takole:
ThoughtCo.comSeveda mora »https://www.thoughtco.com/« pokazati na dejanski URL, ki ga želite skriti, in ThoughtCo.com lahko spremenite v katero koli besedo ali frazo, ki vam je všeč, ki opisuje povezavo.
Tu je ideja, da bo razred aktiven z CSS spodaj, da bi učinkovito skrili povezavo.
Uporabite to kodo CSS
Koda CSS mora obravnavati aktivni razred in razložiti brskalniku, da bi moral biti dogodek, ki je ob kliku povezave, "nič", tako:
.aktivni {kazalniški dogodki: noben; kazalec: privzeto; }To metodo lahko vidite v delu na strani JSFiddle. Če tam odstranite kodo CSS in nato znova zaženete podatke, povezava nenadoma postane možnost klicanja in uporabnosti. To je zato, ker se CSS ne uporablja, povezava se obnaša normalno.
Opomba: Upoštevajte, da če si uporabnik ogleda izvorno kodo strani, bodo videli povezavo in natančno vedeli, kje gre, ker je, kot smo videli zgoraj, koda še vedno tam, pravkar ni uporabna.
Spremenite barvo povezave
Običajno bo spletni oblikovalec naredil hiperpovezave drugačno barvo kot ozadje, da bi jih obiskovalci lahko dejansko videli in vedeli, kje gredo. Vendar smo tukaj, da skrijemo povezave , zato si oglejte, kako spremeniti barvo, ki se bo ujemala s stranjo.
Določite razred po meri
Če uporabljamo isti primer iz prve zgoraj navedene metode, lahko preprosto spremenimo razred na vse, kar želimo, tako da so skrite le posebne povezave.
Če nismo uporabili razreda in namesto tega uporabili CSS od spodaj do vsake povezave, potem bi vse izginile. To ni tisto, kar smo tukaj, zato bomo uporabili to HTML kodo, ki uporablja razred po meri hideme:
ThoughtCo.comIzvedite, katero barvo želite uporabiti
Preden vnesemo ustrezno kodo CSS, da skrijemo povezavo, moramo ugotoviti, katero barvo želimo uporabiti. Če že imate trdno ozadje, tako kot belo ali črno, potem je to preprosto. Vendar pa morajo biti tudi druge posebne barve natančne.
Če na primer vaša barva ozadja vsebuje šestnajstiško vrednost e6ded1 , morate vedeti, da za kodo CSS deluje pravilno za stran, na katero želite, da izgine.
Obstaja veliko teh orodij za izbiro barve ali eyedropper, od katerih se eden od njih imenuje ColorPick Eyedropper za brskalnik Chrome. Uporabite ga za vzorčenje barve ozadja vaše spletne strani, da dobite šestnajsto barvo.
Prilagodite CSS, če želite spremeniti barvo
Zdaj, ko imate barvo, ki naj bi bila povezava, je čas, da to vrednost in vrednost razreda po meri uporabite zgoraj, da napišete kodo CSS:
.hideme {color: # e6ded1; }Če je vaša barva ozadja preprosta, kot je bela ali zelena, vam ni treba postaviti znaka #:
.podzemnica {barva: bela; }Oglejte si vzorčno kodo te metode v tem JSFiddle.