Linki peitmine CSS-iga on võimalik mitmel viisil, kuid vaatame kahte meetodit, milles URL-i saab vaatest täielikult peidetud. Kui soovite oma veebisaidil luua püüdurjaht või lihavõttemuna, on see huvitav viis linkide peitmiseks.
Esimene võimalus on kasutada "none" kui pointer-sündmuste CSS-i vara väärtust. Teine on lihtsalt teksti värvimine, et see vastaks lehe taustale.
Pidage meeles, et ükski meetod ei muuda lähtekoodi otsimisel linki täielikult kaduma. Kuid külastajatel pole lihtsat ja lihtsat viisi, kuidas seda näha, ja teie algajatele ei ole vihje, kuidas linki leida.
Märkus. Kui otsite välise stiililehe linkimise juhiseid, siis need juhised ei ole nii, nagu olete pärast seda. Vaadake, milline on välimine laaditabel? selle asemel.
Keela pointeri sündmus
Esimene meetod, mida saame URLi peitmiseks kasutada, on lingi loomine midagi teha. Kui hiir ületab lingi, ei näidata seda, mida URL viitab ja see ei lase sellel klõpsata.
Kirjutage HTML õigesti
Veebilehel veenduge, et hüperlink oleks järgmine:
ThoughtCo.comLoomulikult peab "https://www.thoughtco.com/" viitama tegelikule URL-le, mida soovite varjata, ja ThoughtCo.com-i saab muuta mis tahes sõna või fraasi järgi, mis kirjeldab linki.
Siin on idee, et linki tõhusaks varjamiseks kasutatakse klassi aktiivset allpool CSS-i.
Kasutage seda CSS-koodi
CSS-kood peab käsitlema aktiivset klassi ja selgitama brauserile, et sündmus linki klõpsamisel peaks olema "puudub", näiteks järgmine:
.aktiivne {pointer-sündmused: pole; kursor: vaikimisi; }Seda meetodit saate vaadata JSFiddle'i kaudu. Kui eemaldate sealt CSS-koodi ja seejärel uuesti andmed, muutub link järsult klikkitavaks ja kasutatavaks. Seda seetõttu, et kui CSS-i ei rakendata, käitub link tavapäraselt.
Märkus. Pidage meeles, et kui kasutaja vaatab lehe lähtekoodi, näeb ta linki ja teab täpselt, kus see läheb, sest nagu näeme eespool, on kood ikkagi olemas, pole see lihtsalt kasutatav.
Muutke linki värvi
Tavaliselt teeb veebidisainer hüperlinke erineva värviga kui taust, nii et külastajad saavad neid tegelikult näha ja teada, kuhu nad lähevad. Kuid me oleme siin, et varjata linke , nii et vaatame, kuidas värvi muuta, et see vastaks lehe omale.
Määrake kohandatud klass
Kui me kasutame ülalolevast esimesest meetodist sama näite, võime klassi lihtsalt muuta, et me sooviksime, et peidetud oleksid ainult erilised lingid.
Kui me ei kasutanud klassi ja selle asemel kasutasime CSS-i allpool igast lingist, siis kõik need kaovad. See pole see, mida me siin pärast, nii et me kasutame seda HTML koodi, mis kasutab kohandatud hideme klassi:
ThoughtCo.comUuri, mida värvi kasutada
Enne kui me sisestame linki varjamiseks sobiva CSS-koodi, peame välja selgitama, millist värvi me tahame kasutada. Kui teil on juba kindel taust, näiteks valge või must, siis on see lihtne. Kuid muud erivärvid peavad olema täpsed ka.
Näiteks, kui teie taustavärvil on e6ded1 hex väärtus, peate teadma, et CSS-koodi korralikult töötab leht, mida soovite seda kaotada.
Saadaval on palju neid "värvi valijaid" või "eyedropper" tööriistu, millest ühte nimetatakse Chrome'i brauseriks ColorPick Eyedropperiks. Kasutage seda, et proovida oma veebilehe taustavärvi kuueteistkümne värvi saamiseks.
Kohandage CSS värvi muutmiseks
Nüüd, kui teil on värv, mida link peaks olema, on aeg seda kasutada ja kohandatud klassi väärtust ülalt, et kirjutada CSS-kood:
.hideme {color: # e6ded1; }Kui teie taustavärv on lihtne nagu valge või roheline, ei pea te enne seda märkima # märki:
.hideme {värv: valge; }Vaadake selle meetodi proovi koodi selles JSFiddleis.