Skrytí spojení se službou CSS lze provést několika způsoby, ale budeme se zabývat dvěma způsoby, ve kterých může být adresa URL zcela zastaralá. Pokud chcete na svém webu vytvořit lovecký úklon nebo velikonoční vajíčko, je to zajímavý způsob, jak skrýt odkazy.
První cestou je použití hodnoty "none" jako hodnoty vlastnosti CSS ukazatele-události. Druhým je prostě zbarvení textu tak, aby odpovídalo pozadí stránky.
Mějte na paměti, že ani jedna metoda nezpůsobí úplné vymizení spojení při hledání zdrojového kódu. Návštěvníci však nebudou mít jednoduchý a přímočarý způsob, jak je vidět, a vaši začátečníci nebudou mít ponětí, jak najít odkaz.
Poznámka: Pokud hledáte pokyny k propojení externího stylu, tyto pokyny nejsou podle toho, co máte. Podívejte se, jaký je externí styl? místo toho.
Zakažte událost Pointer
První metodou, kterou můžeme použít pro skrytí adresy URL, je, aby odkaz neudělal nic. Když se myší pohybuje nad odkazem, nezobrazí to, na které URL odkazuje, a nedovolí vám kliknout na něj.
Napište HTML správně
Jedna na stránce, ujistěte se, že hypertextový odkaz přečte takto:
ThoughtCo.comSamozřejmě, "https://www.thoughtco.com/" musí ukázat na skutečnou adresu URL, kterou chcete skrýt, a ThoughtCo.com lze změnit na libovolné slovo nebo frázi, která se vám líbí, která popisuje odkaz.
Zde je myšlenka, že aktivní třída bude použita s CSS níže, aby se spojení účinně skrývalo.
Použijte tento kód CSS
Kód CSS musí řešit aktivní třídu a vysvětlit prohlížeči, že událost po kliknutí na odkaz, by měla být "žádná", jako je tato:
aktivní {pointer-events: none; kurzor: výchozí; }}Tuto metodu vidíte v akci na adrese JSFiddle. Pokud odeberete kód CSS a poté znovu spusťte data, odkaz se náhle stává klikatelným a použitelným. Je tomu tak proto, že při použití CSS se odkaz nesprávně chová.
Poznámka: Nezapomeňte, že pokud uživatel zobrazí zdrojový kód stránky, uvidí odkaz a přesně vědět, kam jde, protože, jak jsme viděli výše, kód je stále tam, prostě není použitelný.
Změňte barvu propojení
Normálně webový návrhář vytvoří hypertextové odkazy v jiné barvě než pozadí, takže návštěvníci je mohou skutečně vidět a vědět, kam jdou. Nicméně jsme zde, abychom schovali odkazy , a tak se podívejme, jak změnit barvu tak, aby odpovídala barvě stránky.
Definujte vlastní třídu
Použijeme-li stejný příklad z výše uvedené první metody, můžeme jednoduše změnit třídu na to, co chceme, aby byly skryty pouze speciální odkazy.
Pokud jsme nepoužili třídu a místo toho použili CSS na každý odkaz, pak všechny zmizely. To není to, co po nás tady máme, a proto použijeme tento kód HTML, který používá vlastní třídu hideme:
ThoughtCo.comZjistěte, jaké barvy chcete použít
Než zadáme příslušný kód CSS pro skrytí odkazu, musíme zjistit, jakou barvu chceme použít. Pokud už máte solidní pozadí, jako je bílá nebo černá, pak je to snadné. Je však třeba mít i další speciální barvy.
Například pokud barva pozadí má hexadecimální hodnotu e6ded1 , musíte vědět, že kód CSS správně pracuje pro stránku, do které chcete, aby zmizela.
Existuje spousta těchto nástrojů pro výběr barev nebo kapátko, jeden z nich se nazývá ColorPick Eyedropper pro prohlížeč Chrome. Použijte jej k vyzkoušení barvy pozadí webové stránky a získáte hexadecimální barvu.
Přizpůsobte CSS pro změnu barvy
Nyní, když máte barvu, kterou má být odkaz, je čas použít tuto a vlastní třídu hodnotu shora, abyste napsali kód CSS:
.hideme {barva: # e6ded1; }}Pokud je barva pozadí jednoduchá jako bílá nebo zelená, nemusíte před tím zadávat znak #:
.hideme {barva: bílá; }}Podívejte se na ukázkový kód této metody v tomto JSFiddle.