Linkin piilottaminen CSS: llä voidaan tehdä useilla tavoilla, mutta tarkastelemme kahta menetelmää, joissa URL-osoite voidaan täysin piilottaa näkymästä. Jos haluat luoda sivuston sieppaus metsästys tai pääsiäismuna, tämä on mielenkiintoinen tapa piilottaa linkit.
Ensimmäinen tapa on käyttää "ei mitään" osoitekirja-tapahtumien CSS-ominaisuuden arvona. Toinen on yksinkertaisesti värittämällä teksti vastaamaan sivun taustaa.
Muista, ettei kumpikaan menetelmä estä linkin katkeamista löytämästä lähdekoodin etsimistä. Vierailijoilla ei kuitenkaan ole yksinkertaista, suoraviivaista tapaa nähdä se, ja aloitteleville kävijöillesi ei ole selvää, miten löytää linkki.
Huomaa: jos etsit ohjeita ulkoisen tyyliarkin liittämisestä, nämä ohjeet eivät ole sitä, mitä olet tekemässä. Katso mikä ulkoinen tyyliarkki? sen sijaan.
Poista Pointer-tapahtuma käytöstä
Ensimmäinen tapa, jolla voimme salata URL-osoitteen, on tehdä linkki tekemättä mitään. Kun hiiri liukuu linkin päälle, se ei näytä, mitä URL-osoitteet osoittavat, eikä se anna sinun napsauttaa sitä.
Kirjoita HTML oikein
Yksi verkkosivu, varmista, että hyperlinkki lukee näin:
ThoughtCo.comTietenkin "https://www.thoughtco.com/" on osoitettava todelliseen URL-osoitteeseen, jonka haluat piilottaa, ja ThoughtCo.com voidaan muuttaa mihin tahansa haluamaasi sanaan tai lauseeseen, joka kuvaa linkkiä.
Ajatus tässä on, että luokka aktiivinen käytetään alla olevan CSS: n kanssa, jotta linkki voidaan tehokkaasti piilottaa.
Käytä tätä CSS-koodia
CSS-koodin on käsiteltävä aktiiviluokkaa ja selitettävä selaimelle, että tapahtuma linkin napsautuksella pitäisi olla "ei mitään", kuten:
.active (pointer-events: none; kursori: oletus; }Näet tämän menetelmän toiminnassa yli JSFiddle. Jos poistat CSS-koodin ja uudelleen tiedostot uudelleen, linkki tulee yhtäkkiä napsautettavaksi ja käyttökelpoiseksi. Tämä johtuu siitä, että kun CSS ei ole käytössä, linkki käyttäytyy normaalisti.
Huomaa: Muista, että jos käyttäjä tarkastelee sivun lähdekoodia, he näkevät linkin ja tietävät tarkalleen missä se menee, koska kuten yllä näemme, koodi on edelleen olemassa, se ei ole käyttökelpoinen.
Vaihda Linkin Väri
Yleensä web-suunnittelija tekee hyperlinkit eri värejä kuin tausta, jotta kävijät voivat todella nähdä ne ja tietää missä he menevät. Olemme kuitenkin piilossa linkkejä , joten katsotaan, miten voit muuttaa väriä vastaamaan sivun.
Määritä mukautettu luokka
Jos käytämme samaa esimerkkiä edellä olevasta ensimmäisestä menetelmästä, voimme yksinkertaisesti muuttaa luokan haluamaasi kohtaan niin, että vain erityiset linkit piilevät.
Jos emme käytä luokkaa ja käytimme CSS: ää alhaalta jokaiseen linkkiin, kaikki ne katoaisivat. Tämä ei ole sitä, mitä me olemme täällä, joten käytämme tätä HTML-koodia, joka käyttää mukautettua hidemaattiluokkaa:
ThoughtCo.comSelvitä, mitä väriä haluat käyttää
Ennen kuin syötämme tarvittavat CSS-koodit piilottaaksesi linkin, meidän on selvitettävä, mitä väriä haluamme käyttää. Jos sinulla on jo vankka tausta, kuten valkoinen tai musta, silloin se on helppoa. Muiden erikoisvärien on kuitenkin oltava tarkkoja.
Jos esimerkiksi taustan värillä on e6ded1: n hex-arvo, sinun on tiedettävä, että CSS-koodin toimisi oikein sen sivun suhteen, jolle haluat, että se katoaa.
Näitä "värinvalitsinta" tai "silmäluoma" -työkaluja on runsaasti, joista yksi on nimeltään ColorPick-silmäluomi Chrome-selaimelle. Käytä sitä ottaaksesi verkkosivun taustaväri saadaksesi heksadesimaalivärin.
Mukauta CSS Muuta väriä
Nyt kun sinulla on väri, jonka linkin pitäisi olla, on aika käyttää sitä ja muokattua luokan arvoa ylhäältä, kirjoittaa CSS-koodi:
.hideme {väri: # e6ded1; }Jos taustaväri on yksinkertainen kuin valkoinen tai vihreä, sinun ei tarvitse laittaa # -merkkiä ennen sitä:
.hideme {väri: valkoinen; }Katso tämän menetelmän näytekoodi tässä JSFiddleissa.