Hvernig á að fela tengla með CSS

Að fela tengil á CSS er hægt að gera á nokkra vegu, en við munum líta á tvær aðferðir þar sem slóðin getur verið alveg falin frá útsýni. Ef þú vilt búa til hrææta veiði eða páskaegg á vefsvæðinu þínu, þetta er áhugaverður leið til að fela tengla.

Fyrsti leiðin er með því að nota "none" sem bendilinn-atburði CSS eignarverðmæti. Hinn er einfaldlega að lita textann til að passa við bakgrunn síðunnar.

Hafðu í huga að hvorki aðferðin mun gera tengilinn algerlega hverfa frá því að finna í kóðanum. Hins vegar munu gestir ekki hafa einfaldan, einfaldan leið til þess að sjá það, og nýliði gestir þínir munu ekki hafa hugmynd um hvernig á að finna tengilinn.

Athugaðu: Ef þú ert að leita að leiðbeiningum um hvernig á að tengja utanaðkomandi stíll lak eru þessar leiðbeiningar ekki það sem þú ert eftir. Sjáðu hvaða utanaðkomandi stíllark? í staðinn.

Slökktu á Pinter Event

Fyrsta aðferðin sem við getum notað til að fela vefslóð er að gera tengilinn ekkert að gera. Þegar músin sveiflast yfir tengilinn mun það ekki sýna hvað slóðin bendir á og það leyfir þér ekki að smella á það.

Skrifaðu HTML rétt

Einn vefurinn, vertu viss um að tengilinn sé svona:

ThoughtCo.com

Auðvitað, "https://www.thoughtco.com/" þarf að benda á raunverulegan vefslóð sem þú vilt fela og ThoughtCo.com má breyta í hvaða orð eða orðasamband sem þú lýsir því sem tengillinn er.

Hugmyndin hér er sú að flokkurinn virkur verður notaður við CSS hér að neðan til að fela samhengið í raun.

Notaðu þennan CSS kóða

CSS númerið þarf að takast á við virkan bekk og útskýra fyrir vafranum að atburðurinn á smellinum á smell ætti að vera "enginn" eins og þetta:

.virk {bendill-atburður: enginn; bendill: sjálfgefið; }

Þú getur séð þessa aðferð í aðgerð yfir hjá JSFiddle. Ef þú fjarlægir CSS kóða þarna og endurreisa þá gögnin verður hlekkin skyndilega smellt og nothæf. Þetta er vegna þess að þegar CSS er ekki beitt virkar tengilinn venjulega.

Athugaðu: Mundu að ef notandinn skoðar kóðann á síðunni, þá sérðu tengilinn og veit nákvæmlega hvar það fer, því eins og við sjáum hér að framan er kóðinn þar ennþá, það er bara ekki hægt að nota.

Breyttu lit Linsins

Venjulega mun vefhönnuður gera tengla aðra lit en bakgrunninn þannig að gestir geta raunverulega séð þau og vita hvar þeir fara. Hins vegar erum við hér til að fela tengla , þannig að við skulum sjá hvernig á að breyta litinni sem samsvarar síðunni.

Skilgreindu sérsniðna flokk

Ef við notum sama dæmi úr fyrsta aðferðinni hér að framan, getum við einfaldlega breytt bekknum í það sem við viljum svo að aðeins sérstök tengsl séu falin.

Ef við notum ekki kennslustund og beittu CSS hér að neðan til allra tengilinna, þá myndu þau hverfa. Það er ekki það sem við erum hérna, svo við munum nota þessa HTML kóða sem notar sérsniðna hideme bekkinn:

ThoughtCo.com

Finndu út hvaða lit skal nota

Áður en við slærð inn viðeigandi CSS kóða til að fela tengilinn þurfum við að reikna út hvaða lit sem við viljum nota. Ef þú ert með traustan bakgrunn þegar, eins og hvítur eða svartur, þá er það auðvelt. Hins vegar þurfa aðrar sérstakar litir að vera nákvæmir líka.

Til dæmis, ef bakgrunnsliturinn þinn hefur hex-gildi e6ded1 þarftu að vita að fyrir CSS-númerið virkar það rétt fyrir síðuna sem þú vilt að það hverfi í.

Það eru fullt af þessum "litarefnum" eða "eyedropper" verkfærum í boði, þar af er nefnt ColorPick Eyedropper fyrir Chrome vafrann. Notaðu það til að safna bakgrunnslit vefsíðunnar til að fá sex litina.

Sérsniðið CSS til að breyta litinni

Nú þegar þú hefur litinn sem hlekkurinn ætti að vera, þá er kominn tími til að nota það og sérsniðna bekkjarverðmæti fyrir ofan, til að skrifa CSS númerið:

.hideme {color: # e6ded1; }

Ef bakgrunnsliturinn þinn er einfaldur eins og hvítur eða grænn, þarftu ekki að setja # táknið fyrir það:

.hideme {lit: hvítur; }

Sjá sýnishorn kóða þessa aðferð í þessari JSFiddle.