A CSS-lel való kapcsolat elrejtése számos módon lehetséges, de két olyan módszert fogunk megvizsgálni, amelyekben az URL teljes mértékben elrejthető a nézetből. Ha szeretne vadászni vagy húsvéti tojást készíteni a webhelyén, ez egy érdekes módja a linkek elrejtésének.
Az első az, hogy a mutató-események CSS tulajdonságértékét "none" -ként használjuk. A másik egyszerűen színezi a szöveget, hogy megfeleljen az oldal hátterének.
Ne feledje, hogy egyik módszer sem fogja a linket teljesen eltűnni a forráskód keresésénél. Azonban a látogatóknak nincs egyszerű, egyszerű módja arra, hogy megtekinthessék, és a kezdő látogatóknak nem lesz nyomon követésük a link megtalálásához.
Megjegyzés: Ha olyan utasításokat szeretne keresni, amelyek a külső stíluslapok összekapcsolására szolgálnak, ezek az utasítások nem az Ön által követettek. Lásd: Milyen külső stíluslap? helyette.
Letilthatja a Pointer eseményt
Az első módszer, amellyel elrejthetünk egy URL-t, a link létrehozása nem tesz semmit. Ha az egér a hivatkozás fölött lebeg, akkor nem fogja megmutatni, hogy az URL hogyan mutat, és nem engedi, hogy rákattintson rá.
Írja be a HTML-t helyesen
Az egyik a weboldal, győződjön meg arról, hogy a hivatkozás így hangzik:
ThoughtCo.comTermészetesen a "https://www.thoughtco.com/" -nek meg kell mutatnia a rejtett tényleges URL-t, és a ThoughtCo.com bármely szóra vagy kifejezésre változtatható, amely a hivatkozást írja le.
Az ötlet az, hogy az aktív osztály az alábbi CSS-lel együtt használható a link elrejtéséhez.
Használja ezt a CSS kódot
A CSS kódnak foglalkoznia kell az aktív osztályral és meg kell magyaráznia a böngészőnek, hogy az esemény a linkre kattintva "nincs", így:
.active {pointer-events: none; kurzor: alapértelmezett; }Ezt a módszert láthatod a JSFiddle alatt. Ha eltávolítja az ott található CSS kódot, majd újratervezi az adatokat, akkor a hivatkozás hirtelen kattinthatóvá és használhatóvá válik. Ez azért van, mert amikor a CSS nem kerül alkalmazásra, akkor a kapcsolat rendesen viselkedik.
Megjegyzés: Ne feledje, hogy ha a felhasználó megnézheti az oldal forráskódját, látni fogják a linket és pontosan tudják, hová megy, mert ahogy fent látjuk, a kód még mindig ott van, csak nem használható.
Módosítsa a Link színeket
Általában egy webdesigner hiperlinkeket eltérő színűvé tesz, mint a háttér, hogy a látogatók valóban láthassák őket, és tudják, hová mennek. Azonban itt vagyunk, hogy elrejtsük a linkeket , ezért nézzük meg, hogyan kell megváltoztatni a színt, hogy megegyezzen az oldaléval.
Egyéni osztály meghatározása
Ha ugyanazt a példát alkalmazzuk a fenti első módszerből, egyszerűen megváltoztathatjuk az osztályt bármi másra is, hogy csak a speciális linkeket rejtsük el.
Ha nem használtunk egy osztályt, és alulról a CSS-t alkalmaztuk minden linkre, akkor mindegyik eltűnik. Ez nem az, ami itt vagyunk, ezért használjuk ezt az HTML-kódot, amely az egyéni sürgősségi osztályt használja:
ThoughtCo.comIsmerje meg, milyen színű használni
Mielőtt megadnánk a megfelelő CSS kódot, hogy elrejtsük a linket, meg kell találnunk, milyen színt szeretnénk használni. Ha már van egy szilárd háttere, mint a fehér vagy a fekete, akkor ez könnyű. Azonban más különleges színeknek is pontosnak kell lenniük.
Például, ha a háttérszíne hatszögletű e6ded1 értékkel rendelkezik, akkor tudnia kell, hogy a CSS kód megfelelően működik az oldalra, amelyre kíváncsi, hogy eltűnjön.
Rengeteg ilyen "színválasztó" vagy "szemcseppes" eszköz áll rendelkezésre, amelyek közül az egyiket a Chrome böngészőnek hívják ColorPick Eyedropper. Használja azt, hogy mintaold ki a weboldal háttérszínét, hogy megkapja a hex színt.
Testreszabhatja a CSS-t a Szín megváltoztatásához
Most, hogy megvan a színe, hogy a link legyen, itt az ideje, hogy ezt és az egyéni osztály értékét felülről írja a CSS kód megírásához:
.hideme {color: # e6ded1; }Ha a háttérszíne egyszerű, mint a fehér vagy a zöld, akkor nem kell a # jelet előtte elhelyeznie:
.hideme {szín: fehér; }Tekintse meg a módszer mintakódját ebben a JSFiddle-ben.