Ki jan yo Kache Lyen Sèvi ak CSS

Kache yon lyen ak CSS ka fè yon kantite fason, men nou pral gade nan de metòd nan ki yon URL ka konplètman kache de vi. Si ou vle kreye yon lachas scavenger oswa ze Pak sou sit ou, sa a se yon fason ki enteresan yo kache lyen yo.

Premye fason an se lè l sèvi avèk "Pa gen yonn" kòm valè konsèy-evènman CSS valè. Lòt la se pa senpleman kolorye tèks la matche ak background nan nan paj la.

Kenbe nan tèt ou ke ni metòd ap fè lyen an totalman disparèt nan yo te jwenn lè chache kòd sous la. Sepandan, vizitè pa pral gen yon senp, dwat fason nan ki wè li, ak vizitè inisyasyon ou a pa pral gen yon siy ki jan yo jwenn lyen an.

Remak: Si w ap chèche pou enstriksyon sou kòman yo konekte yon fèy style ekstèn, enstriksyon sa yo pa sa w ap apre. Al gade nan ki sa yon dra Style ekstèn? olye.

Enfim Evènman an Pointer

Metòd an premye nou ka itilize yo kache yon URL se fè lyen an pa fè anyen. Lè sourit la sou lyen an, li pa pral montre ki pwen URL yo epi li pa pral kite ou klike sou li.

Ekri HTML la kòrèkteman

Youn paj wèb la, asire w ke hyperlink la li tankou sa a:

ThoughtCo.com

Natirèlman, "https://www.thoughtco.com/" bezwen pwen nan URL aktyèl la ke ou vle kache, ak ThoughtCo.com ka chanje nan nenpòt mo oswa fraz ou renmen sa ki dekri lyen an.

Lide a isit la se ke aktif nan klas yo pral itilize ak CSS ki anba a efektivman kache lyen an.

Itilize Kòd CSS sa a

Kòd CSS la bezwen adrese klas la aktif epi eksplike navigatè a ke evènman an sou klike sou lyen, yo ta dwe "Pa gen," tankou sa a:

. aktif {pointer-events: none; kurseur: default; }}

Ou ka wè metòd sa a nan aksyon sou JSFiddle. Si ou retire kòd la CSS la, ak Lè sa a, relance done yo, lyen an toudenkou vin klikabl ak ka itilize. Sa a se paske lè CSS la pa aplike, lyen an konpòte li nòmalman.

Remak: Sonje ke si itilizatè a wè kòd sous paj la, yo pral wè lyen an epi konnen egzakteman ki kote li ale paske tankou nou wè anwo a, kòd la toujou la, li jis se pa ka itilize.

Chanje Koulè Link la

Nòmalman, yon designer entènèt pral fè hyperlinks yon koulè diferan pase background nan pou vizitè ka aktyèlman wè yo epi konnen ki kote yo ale. Sepandan, nou isit la yo kache lyen , se konsa kite a wè ki jan yo chanje koulè a ​​matche ak sa yo ki nan paj la.

Defini yon klas Custom

Si nou itilize menm egzanp nan premye metòd ki anwo a, nou ka senpleman chanje klas la nan tou sa nou vle pou ke sèlman lyen espesyal yo kache.

Si nou pa t 'sèvi ak yon klas ak olye aplike CSS la soti nan anba a nan chak lyen, Lè sa a, tout nan yo ta disparèt. Se pa sa nou ap apre isit la, se konsa nou pral sèvi ak kòd HTML sa a ki ap itilize klas la hidèm klas:

ThoughtCo.com

Chache konnen kisa ki pou itilize

Anvan nou antre kòd apwopriye CSS pou kache lyen an, nou bezwen konnen ki koulè nou vle itilize. Si ou gen yon background solid deja, tankou blan oswa nwa, Lè sa a, sa a fasil. Sepandan, lòt koulè espesyal bezwen egzak tou.

Pou egzanp, si koulè background ou an gen yon valè hexes nan e6ded1 , ou bezwen konnen ke pou kòd la CSS yo travay byen pou paj la w ap vle li nan disparèt nan.

Gen anpil nan sa yo "kiltivatè koulè" oswa "eyouteur" zouti ki disponib, youn nan ki yo rele ColorPick Eyedropper pou navigatè a Chrome. Sèvi ak li nan echantiyon koulè a ​​background nan paj entènèt ou a jwenn koulè a ​​ègzagonal.

Customize CSS la chanje koulè a

Kounye a ke ou gen koulè ki lyen an ta dwe, li lè yo sèvi ak sa ak valè a klas koutim soti nan pi wo a, yo ekri kòd la CSS:

.hideme {koulè: # e6ded1; }}

Si koulè background ou senp tankou blan oswa vèt, ou pa oblije mete siy lan # anvan li:

.hideme {koulè: blan; }}

Gade kòd egzanp echantiyon sa a nan JSFiddle sa a.