Hënn e Link mat CSS verstoppt kann eng Rei vu Weeër gemaach ginn, awer mir kucken zwou Methoden, bei deenen eng URL komplett vu senger Säit verbonnen ass. Wann Dir e Scavenger Hunt oder easter Ee op Ärer Säit kreéieren wëllt, ass dat eng interessant Manéier Linken ze verstoppen.
Déi éischt Manéier ass mat "none" wéi d'Pointer-Ereignisse CSS-Eigenschaft value. Déi aner ass einfach den Text ze koloréieren an de Background vun der Säit ze passen.
Denkt drun datt keng Methode de Link verloosst total verschwonnen ass wann se de Quellcode fannen. Allerdéngs wäerten d'Besucher net einfach, einfach Aart a wat se gesinn, an Är Startnotizen net e Wuert iwwer d'Linn fannen.
Remarque: Wann Dir nei Instruktiounen nogeet, wéi Dir e externe Formblat verbënnt, gitt dës Anleitung net wat Dir sidd no. Kuckt. Wat fir eng External Style Sheet? anstatt.
De Pointer Event deaktivéieren
Déi éischt Methode déi mir benotzen fir eng URL ze verstecken ass de Link ze maachen fir näischt ze maachen. Wann d'Maus driwwer iwwer de Link hellt, wäert et net weisen wat de URL weist an et ass net datt Dir et klickt.
Schreift d'HTML Correctly
Een der Websäit, gitt sécher datt de Hyperlink esou ass:
ThoughtCo.comNatierlech muss "https://www.thoughtco.com/" op d'tatsächlech URL kucken, déi Dir verbruele wëllt, a ThoughtCo.com kann op ee Wuert oder Är phrase geännert ginn deen Dir gitt datt de Link beschreift.
D'Iddi ass hei datt d'Klass aktiv mat der CSS benotzt gëtt fir de Link effektiv verstees de.
Benotzt dëse CSS Code
De CSS-Code muss d'aktive Klass uginn an erkläre mam Browser datt d'Event op de Link klickt soll "none" sinn:
.aktiv {pointer-event: none; Cursor: Standard; }}Dir kënnt dës Method an der Aktioun iwwer JSFiddle gesinn. Wann Dir den CSS Code ofgeschaaft hutt, a rerun d'Donnéeën vun den Donnéeën, gëtt de Link plötzlich klickt an benotzt. Dëst ass, well wann d'CSS net opgedeelt ass, verännert de Link normalerweis.
Bemierkung: Denkt drun datt wann de Benotzer de Quellcode vun der Säit kuckt, gesitt der den Link a wësst genee wou et geet, well mir gesi wéi et hei geet, ass de Code nach ëmmer do, et ass einfach net benotbar.
Ändern de Link & # 39; s Faarf
Normalerweis maachen e Webdesigner Hyperlinks a verschiddene Faarwen wéi den Hannergrond, fir datt d'Gäscht kënne se gesinn a wësse wou se ginn. Mir sinn awer hei fir Links ze versteelen , loosse mer kucken wéi d'Faarf geännert gëtt mat deem vun der Säit ze passen.
Definéiert eng Client Custom
Wa mir dat selwecht Beispill vun der éischter Method benotze benotze mir eis einfach de Klass un all déi, déi mir wëllen sou datt nëmmen spezielle Link verstoppt sinn.
Wa mir eng Klasse net benotzt hunn an aplaz d'CSS vun ënnen op all Link applizéiert, dann all si verschwonnen. Dat ass net dat wat mir hei nëtt sinn, dofir wäerte mir dëse HTML Code benotzen deen benotzt d'Zollkiereme Klasse:
ThoughtCo.comFannt Dir Wat Faar benotze kënnt
Ier mer den passenden CSS-Code eroflueden fir de Link ze verdeelen, musse mer erausfannen, wéi d'Faarf déi mir benotze wëllt. Wann Dir e festen Hannergrond scho wéi schwaarz oder schwaarz war, dann ass et einfach. Awer aner speziell Faarwen mussen genee genuch sinn.
Zum Beispill, wann Är Backgroundfaarf e Sechtswert vun e6ded1 ass , musst Dir wëssen, datt de CSS Code richteg funktionnéiert fir déi Säit déi Dir wëllt entschëllegen.
Et gi vill vun dësen "Faarwen" oder "Eyedropper" -Anger disponibelt, eent vun denen ass ColorPick Eyedropper fir den Chrome Browser genannt. Benotzt et fir d'Backgroundfär vun Ärer Websäit ze préparéieren fir d'Hexendekoratioun ze kréien.
Passen den CSS fir d'Faar änneren
Elo datt Dir d'Faarf, déi de Link sollt sinn, ass et Zäit ze benotzen an de Klassenwert vun uewen, de CSS Code ze schreiwen:
.hideme {color: # e6ded1; }}Wann Är Backgroundfaarf net wéi wäiss a gréng ass, musst Dir d'# Zeeche virun net setzen:
.hideme {color: white; }}Kuckt dëse Modul de Beispillercode vun dësem JSFiddle.