Slėpti nuorodą su CSS galima padaryti keliais būdais, tačiau mes ieškosime dviejų būdų, pagal kuriuos URL gali būti visiškai paslėptas iš peržiūros. Jei norite, kad jūsų svetainėje būtų sukurta medžioklė ar lengvoji kiaušinis, tai įdomus būdas paslėpti nuorodas.
Pirmasis būdas yra naudoti "none" kaip rodiklio įvykių CSS nuosavybės vertę. Kitas yra tiesiog spalvos tekstas, kad atitiktų puslapio fono.
Turėkite omenyje, kad nė vienas iš šių metodų nesukels nuorodą ieškant šaltinio kodo. Tačiau lankytojai neturės paprasto ir nesudėtingo būdų jį pamatyti, o jūsų pradedantiesiems lankytojai negalės sužinoti, kaip rasti nuorodą.
Pastaba: jei ieškote nurodymų, kaip susieti išorinį stiliaus lapą, šios instrukcijos nėra tai, ką jūs sekate. Žr. Koks išorinis stiliaus lapas? vietoj to.
Išjungti žymeklio įvykį
Pirmasis būdas, kuriuo galime paslėpti URL, yra tai, kad nuoroda nieko nedaro. Kai pelė užveskite po nuorodą, ji nebus rodoma, į ką nurodo URL, ir ji neleis spustelėti jo.
Rašykite HTML teisingai
Vienas tinklalapis, įsitikinkite, kad hipersaitė yra tokia:
ThoughtCo.comŽinoma, "https://www.thoughtco.com/" turi nurodyti tašką, kurį norite paslėpti, ir " ThoughtCo.com" gali būti pakeistas į bet kurį žodį ar frazę, kuri jums patinka, apibūdina nuorodą.
Idėja yra ta, kad aktyvi klasė bus naudojama žemiau esančią CSS, kad būtų galima veiksmingai slėpti nuorodą.
Naudokite šį CSS kodą
CSS kodui reikia kreiptis į aktyvią klasę ir paaiškinti naršyklei, kad įvykis po nuorodos spragtelėjimo turi būti "none", kaip šis:
.aktyvūs {pointer-events: none; žymeklis: pagal nutylėjimą; }Galite pamatyti šį metodą veikdami JSFiddle. Jei čia pašalinsite CSS kodą, o po to pakartotinai perduosite duomenis, nuoroda staiga tampa paspaudžiama ir naudojama. Taip yra todėl, kai CSS netaikomas, nuoroda elgiasi normaliai.
Pastaba: nepamirškite, kad jei naudotojas peržiūrės puslapio šaltinio kodą, jis pamatys nuorodą ir tiksliai sužinys, kur jis eina, nes, kaip matome aukščiau, kodas vis dar yra, jis netinkamas naudoti.
Pakeiskite nuorodą "Spalva"
Paprastai interneto dizaineris daro nuorodas iš kitos spalvos nei fonas, kad lankytojai galėtų juos pamatyti ir sužinoti, kur jie eina. Tačiau mes esame čia, kad paslėptumėte nuorodas , todėl pažiūrėkime, kaip pakeisti spalvą, kad ji atitiktų puslapio charakteristikas.
Nustatykite pasirinktinę klasę
Jei naudosime tą patį pavyzdį iš pirmojo pirmiau aprašyto metodo, mes galime paprasčiausiai pakeisti klasę bet kur norime, kad nebūtų paslėpti tik specialūs saitai.
Jei mes nenaudojome klasės ir vietoj to pritaikėme CSS iš apačios į kiekvieną nuorodą, visi jie išnyks. Tai nėra tai, ką mes esame po čia, todėl mes naudosime šį HTML kodą naudodami pasirinktą hideme klasę:
ThoughtCo.comSužinok kokią spalvą naudoti
Prieš įveskite atitinkamą CSS kodą, kad paslėptumėte nuorodą, turime išsiaiškinti, kokią spalvą mes norime naudoti. Jei jau turite tvirtą foną, pavyzdžiui, baltą ar juodą, tai lengva. Tačiau kitos ypatingos spalvos taip pat turi būti tikslūs.
Pvz., Jei jūsų fono spalva turi šešiavalitę reikšmę e6ded1 , turite žinoti, kad CSS kodas tinkamai veikia puslapiui, kuriame norite, kad jis išnyktų.
Yra daug šių "spalvotų rinkiklių" arba "akių pylimo" įrankių, iš kurių vienas yra vadinamas "ChromePro" naršyklėje "ColorPick Eyedropper". Naudokite jį, kad išrinktumėte savo puslapio fono spalvą, kad gautumėte šešioliktąją spalvą.
Tinkinti CSS pakeisti spalvą
Dabar, kai turite spalvą, kurią turėtų turėti nuoroda, laikas naudoti šį ir tinkintą klasės vertę iš viršaus, norėdami parašyti CSS kodą:
.hideme {color: # e6ded1; }Jei jūsų fono spalva yra paprasta, pvz., Balta arba žalia, jums nereikia įdėti # ženklo prieš jį:
.hideme {color: white; }Žiūrėkite šio metodo mėginio kodą šiame JSFiddle.