Gellir cuddio cyswllt â CSS mewn nifer o ffyrdd, ond byddwn yn edrych ar ddau ddull y gall URL fod yn hollol gudd o'r golwg. Os ydych chi eisiau creu helfa scavenger neu wyau pysgota ar eich safle, mae hwn yn ffordd ddiddorol o guddio cysylltiadau.
Y ffordd gyntaf yw trwy ddefnyddio "none" fel gwerth eiddo CSS y pwyntydd-ddigwyddiadau. Y llall yw lliwio'r testun yn unig i gydweddu cefndir y dudalen.
Cofiwch na fydd y naill ddull na'r llall yn golygu bod y ddolen yn diflannu'n llwyr rhag cael ei ganfod wrth chwilio'r cod ffynhonnell. Fodd bynnag, ni fydd gan ymwelwyr ffordd syml, syml i'w gweld, ac ni fydd gan eich ymwelwyr newydd ddealltwriaeth o sut i ddod o hyd i'r ddolen.
Nodyn: Os ydych chi'n chwilio am gyfarwyddiadau ar sut i gysylltu dalen arddull allanol, nid yw'r cyfarwyddiadau hyn yr hyn yr ydych ar ôl. Gweld Beth yw Taflen Arddull Allanol? yn lle hynny.
Analluoga'r Digwyddiad Pointer
Y dull cyntaf y gallwn ei ddefnyddio i guddio URL yw gwneud y cyswllt ddim yn gwneud dim. Pan fydd y llygoden yn troi dros y cyswllt, ni fydd yn dangos yr hyn y mae'r URL yn ei nodi ac ni fydd yn gadael i chi glicio arno.
Ysgrifennwch yr HTML yn gywir
Un y dudalen we, gwnewch yn siŵr bod y hypergyswllt yn darllen fel hyn:
ThoughtCo.comWrth gwrs, mae angen i "https://www.thoughtco.com/" roi sylw i'r URL gwirioneddol yr ydych am ei guddio, a gellir newid ThoughtCo.com i unrhyw eiriau neu ymadrodd rydych chi'n hoffi hynny sy'n disgrifio'r ddolen.
Y syniad yma yw y bydd y dosbarth yn weithredol yn cael ei ddefnyddio gyda'r CSS isod i guddio'r cyswllt yn effeithiol.
Defnyddiwch y Côd CSS hwn
Mae angen i'r cod CSS fynd i'r afael â'r dosbarth gweithgar ac egluro i'r porwr y dylai'r digwyddiad ar y ddolen glicio, fod yn "dim," fel hyn:
.active {pointer-events: none; cyrchwr: rhagosodedig; }Gallwch weld y dull hwn ar waith yn JSFiddle. Os byddwch yn dileu'r cod CSS yno, ac yna'n ail-adrodd y data, mae'r cyswllt yn sydyn yn dod yn glicadwy ac yn ddefnyddiol. Y rheswm am hyn yw pan nad yw'r CSS yn cael ei gymhwyso, mae'r ddolen yn ymddwyn fel rheol.
Nodyn: Cofiwch, os bydd y defnyddiwr yn gweld cod ffynhonnell y dudalen, byddant yn gweld y ddolen ac yn gwybod yn union ble mae'n digwydd oherwydd, fel y gwelwn uchod, mae'r cod yn dal i fod yno, nid yw'n hawdd ei ddefnyddio.
Newid y Lliw Cyswllt
Fel arfer, bydd dylunydd gwe yn hypergysylltu lliw gwahanol na'r cefndir fel y gall ymwelwyr eu gweld mewn gwirionedd a gwybod ble maent yn mynd. Fodd bynnag, rydym ni yma i guddio dolenni , felly gadewch i ni weld sut i newid y lliw i gydweddu â'r dudalen.
Diffinio Dosbarthiad Arfer
Os byddwn yn defnyddio'r un enghraifft o'r dull cyntaf uchod, gallwn newid y dosbarth i beth bynnag yr ydym ei eisiau fel bod dim ond cysylltiadau arbennig yn cael eu cuddio.
Os na ddefnyddiasom ddosbarth ac yn lle hynny, cymhwysodd yr CSS o isod i bob cyswllt, yna byddai pob un ohonynt yn diflannu. Nid dyna'r hyn yr ydym ar ôl yma, felly byddwn ni'n defnyddio'r cod HTML hwn sy'n defnyddio'r dosbarth hideme arferol:
ThoughtCo.comDod o hyd i ba lliw i'w ddefnyddio
Cyn inni fynd i mewn i'r cod CSS priodol i guddio'r ddolen, mae angen inni nodi pa lliw yr ydym am ei ddefnyddio. Os oes gennych gefndir cadarn eisoes, fel gwyn neu ddu, yna mae hynny'n hawdd. Fodd bynnag, mae angen i liwiau arbennig eraill fod yn union hefyd.
Er enghraifft, os oes gan eich lliw cefndir werth hecsd1 , mae angen i chi wybod bod y cod CSS yn gweithio'n iawn ar gyfer y dudalen rydych chi am iddi ei diflannu.
Mae digonedd o'r offerynnau "dewiswr lliw" neu "eyedropper" sydd ar gael, y mae un ohonynt yn cael ei alw'n ColorPick Eyedropper ar gyfer porwr Chrome. Defnyddiwch hi i samplu lliw cefndir eich tudalen we i gael y lliw hecs.
Addaswch yr CSS i Newid y Lliw
Nawr bod gennych chi'r lliw y dylai'r cyswllt fod, mae'n bryd defnyddio hynny a'r gwerth dosbarth arferol o'r uchod, i ysgrifennu'r cod CSS:
.hideme {lliw: # e6ded1; }Os yw'ch lliw cefndirol yn syml fel gwyn neu wyrdd, does dim rhaid i chi roi'r arwydd # cyn ei fod:
.hideme {lliw: gwyn; }Gweler cod sampl y dull hwn yn y JSFiddle hwn.