Ang pagtatago ng isang link sa CSS ay maaaring gawin ng maraming mga paraan, ngunit titingnan namin ang dalawang mga paraan kung saan ang isang URL ay maaaring ganap na nakatago mula sa pagtingin. Kung nais mong lumikha ng isang hamburahan ng basura o Easter itlog sa iyong site, ito ay isang kawili-wiling paraan upang itago ang mga link.
Ang unang paraan ay ang paggamit ng "none" bilang pointer-events CSS property value. Ang isa ay sa pamamagitan lamang ng pangkulay ang teksto upang tumugma sa background ng pahina.
Tandaan na ang alinman sa paraan ay gumawa ng ganap na mawala ang link mula sa pagiging matagpuan kapag naghahanap ng source code. Gayunpaman, ang mga bisita ay hindi magkakaroon ng isang simple, tapat na paraan upang makita ito, at ang iyong mga bisita sa novice ay hindi magkakaroon ng bakas kung paano hanapin ang link.
Tandaan: Kung naghahanap ka ng mga tagubilin kung paano mag-link ng isang panlabas na style sheet, ang mga tagubilin na ito ay hindi kung ano ang iyong matapos. Tingnan ang Ano ang isang Panlabas na Estilo ng Sheet? sa halip.
Huwag paganahin ang Kaganapan sa Pointer
Ang unang paraan na maaari naming gamitin upang itago ang isang URL ay upang gawin ang link ay wala. Kapag ang mouse hovers sa ibabaw ng link, hindi ito ay magpapakita kung ano ang punto ng URL at hindi ito ay hayaan mong i-click ito.
Isulat ang HTML nang wasto
Isa sa web page, siguraduhin na ang hyperlink ay bumabasa ng ganito:
ThoughtCo.comSiyempre, "https://www.thoughtco.com/" ay kailangang ituro ang aktwal na URL na gusto ninyong maitago, at ang ThoughtCo.com ay maaaring mabago sa anumang salita o parirala na gusto ninyo na naglalarawan ng link.
Ang ideya dito ay ang aktibong klase ay gagamitin sa CSS sa ibaba upang epektibong itago ang link.
Gamitin ang CSS Code na ito
Kailangan ng CSS code na tugunan ang aktibong klase at ipaliwanag sa browser na ang kaganapan sa pag-click sa link, ay dapat na "none," tulad nito:
.active {pointer-events: none; cursor: default; }Maaari mong makita ang paraan na ito sa pagkilos sa JSFiddle. Kung aalisin mo ang CSS code doon, at pagkatapos ay i-rerun ang data, ang link ay biglang nagiging naki-click at magagamit. Ito ay dahil kapag hindi inilalapat ang CSS, ang normal na pag-uugali ng link.
Tandaan: Tandaan na kung tinitingnan ng user ang source code ng pahina, makikita nila ang link at alam kung eksakto kung saan ito napupunta dahil tulad ng nakikita natin sa itaas, ang code ay naroon pa rin, hindi ito kapaki-pakinabang.
Baguhin ang Link ng Kulay
Karaniwan, ang isang taga-disenyo ng web ay gumawa ng mga hyperlink ng ibang kulay kaysa sa background upang ang mga bisita ay maaaring makita ang mga ito at alam kung saan sila pupunta. Gayunpaman, narito kami upang itago ang mga link , kaya tingnan natin kung paano baguhin ang kulay upang tumugma sa pahina.
Tukuyin ang isang Pasadyang Klase
Kung gagamitin namin ang parehong halimbawa mula sa unang paraan sa itaas, maaari lamang namin baguhin ang klase sa anumang nais namin upang ang tanging mga espesyal na link ay nakatago.
Kung hindi kami gumamit ng isang klase at sa halip ay inilapat ang CSS mula sa ibaba sa bawat link, pagkatapos ay mawawala ang lahat. Iyan ay hindi kung ano tayo pagkatapos dito, kaya gagamitin namin ang HTML code na ito gamit ang custom na hideme class:
ThoughtCo.comAlamin kung anong Kulay ang Gagamitin
Bago kami pumasok sa naaangkop na code ng CSS upang itago ang link, kailangan naming malaman kung anong kulay ang gusto naming gamitin. Kung mayroon kang matatag na background, tulad ng puti o itim, pagkatapos ay madali iyon. Gayunpaman, ang ibang mga espesyal na kulay ay kailangang eksaktong masyadong.
Halimbawa, kung ang kulay ng iyong background ay may hex na halaga ng e6ded1 , kailangan mong malaman na para sa code ng CSS upang gumana nang maayos para sa pahina na nais mong mawala ito.
Mayroong maraming mga tool na "picker ng kulay" o "eyedropper" na magagamit, ang isa ay tinatawag na ColorPick Eyedropper para sa browser ng Chrome. Gamitin ito upang makatikim ng kulay ng background ng iyong web page upang makuha ang hex na kulay.
I-customize ang CSS upang Baguhin ang Kulay
Ngayon na mayroon ka ng kulay na ang link ay dapat na, oras na upang gamitin iyon at ang custom na halaga ng klase mula sa itaas, upang isulat ang CSS code:
.hideme {color: # e6ded1; }Kung ang iyong kulay ng background ay simple tulad ng puti o berde, hindi mo kailangang ilagay ang # sign bago ito:
.hideme {kulay: puti; }Tingnan ang halimbawang code ng pamamaraang ito sa JSFiddle na ito.