Skrytie odkazu so službou CSS sa môže vykonať viacerými spôsobmi, ale budeme sa pozrieť na dve metódy, v ktorých môže byť adresa URL úplne skrytá. Ak chcete na svojom webe vytvoriť lov na čistenie alebo veľkonočné vajíčko, je to zaujímavý spôsob, ako skryť odkazy.
Prvý spôsob je použitie hodnoty "none" ako hodnoty vlastnosti CSS ukazovateľa-udalosti. Druhým je jednoducho sfarbenie textu tak, aby zodpovedalo pozadiu stránky.
Majte na pamäti, že ani jedna metóda nezmení spojenie úplne z hľadania pri vyhľadávaní zdrojového kódu. Návštevníci však nebudú mať jednoduchý a priamočiary spôsob, ako ich vidieť, a vaši novici návštevníci nebudú vedieť, ako nájsť odkaz.
Poznámka: Pokiaľ hľadáte pokyny na prepojenie externého štýlu so štýlmi, tieto pokyny nie sú to, čo ste napísali. Pozrite si Aký vonkajší štýl? miesto.
Zakázať udalosť ukazovateľa
Prvá metóda, ktorú môžeme použiť na skrytie adresy URL, je vytvoriť odkaz, ktorý nemá nič. Keď sa myš pohybuje nad odkazom, nezobrazí to, na čo odkazuje adresa URL, a nedovolí vám to kliknúť.
Napíšte HTML správne
Jedna webová stránka, uistite sa, že hypertextový odkaz prečíta takto:
ThoughtCo.comSamozrejme, "https://www.thoughtco.com/" musí ukazovať na skutočnú adresu URL, ktorú chcete skryť, a ThoughtCo.com môže byť zmenené na ľubovoľné slovo alebo frázu, ktorá sa vám páči, ktorá popisuje odkaz.
Myšlienkou je, že trieda aktívna bude použitá s CSS nižšie na efektívne skrytie odkazu.
Použite tento kód CSS
Kód CSS sa musí zaoberať aktívnou triedou a vysvetliť prehliadaču, že udalosť po kliknutí na odkaz, by mala byť "žiadna", napríklad takto:
aktívna {ukazovateľ-udalosti: žiadna; kurzor: predvolené; }Túto metódu môžete vidieť v akcii na stránke JSFiddle. Ak odstránite kód CSS a potom znova spustite údaje, odkaz sa náhle stáva klikateľným a použiteľným. Je to preto, že pri použití CSS sa odkaz nesprávne správa.
Poznámka: Nezabudnite, že ak používateľ uvidí zdrojový kód stránky, uvidia odkaz a presne vedia, kam ide, pretože, ako sme uviedli vyššie, kód je stále tam, jednoducho nie je použiteľný.
Zmeňte farbu odkazu
Za normálnych okolností webový dizajnér vytvorí hypertextové odkazy inú farbu ako pozadie, aby ich návštevníci mohli skutočne vidieť a vedeli, kam idú. Sme tu však na to, aby sme skryli odkazy , a tak sa pozrime, ako zmeniť farbu, ktorá zodpovedá farbe stránky.
Definujte vlastnú triedu
Ak použijeme ten istý príklad z prvej vyššie uvedenej metódy, môžeme jednoducho zmeniť triedu na čokoľvek, čo chceme, aby boli skryté iba špeciálne odkazy.
Ak by sme nepoužili triedu a namiesto toho použili CSS na každý odkaz, všetky z nich by zmizli. To nie je to, o čom sme tu, a preto použijeme tento kód HTML, ktorý používa vlastnú triedu hideme:
ThoughtCo.comZistite, akú farbu chcete používať
Predtým, ako zadáme príslušný kód CSS na skrytie odkazu, musíme zistiť, akú farbu chceme použiť. Ak už máte pevné pozadie, napríklad biele alebo čierne, potom je to jednoduché. Ostatné špeciálne farby však musia byť presné.
Ak má napríklad farba pozadia hexadecimálnu hodnotu e6ded1 , potrebujete vedieť, že kód CSS správne funguje pre stránku, ktorú chcete, aby zmizla.
Existuje množstvo nástrojov na výber farieb alebo "kapátok", z ktorých jeden sa nazýva ColorPick Eyedropper pre prehliadač Chrome. Použite ho na vzorku farby pozadia vašej webovej stránky, aby ste získali šesťfarebnú farbu.
Prispôsobte si CSS na zmenu farby
Teraz, keď máte farbu, ktorá by mala byť odkazom, je čas použiť túto a vlastnú hodnotu triedy zhora, aby ste napísali kód CSS:
.hideme {farba: # e6ded1; }Ak je farba pozadia jednoduchá ako biela alebo zelená, nemusíte pred ňou umiestniť znak #:
.hideme {farba: biela; }Pozrite si vzorový kód tejto metódy v tomto JSFiddle.