Unsaon Pagtago sa Mga Link Paggamit sa CSS

Ang pagtago sa usa ka sumpay sa CSS mahimo nga daghang mga paagi, apan atong tan-awon ang duha ka mga pamaagi diin ang usa ka URL mahimong hingpit nga natago gikan sa panglantaw. Kon gusto ka nga maghimo sa usa ka hambugero nga pangitaon o itlog sa Easter sa imong site, kini usa ka makapaikag nga paagi sa pagtago sa mga link.

Ang una nga paagi mao ang paggamit sa "wala" ingon nga pointer-events CSS value property. Ang usa mao ang pinaagi lamang sa pagkolor sa teksto aron itandi ang background sa panid.

Hinumdomi nga walay bisan usa ka pamaagi nga maghimo sa link nga hingpit nga mawala gikan sa pagkaplag sa pagpangita sa source code. Apan, ang mga bisita dili adunay usa ka yano, direkta nga paagi aron makita kini, ug ang imong mga bisita sa novice walay ideya kon unsaon pagpangita ang link.

Hinumdomi: Kon nangita ka og mga panudlo kon unsaon pag-link ang usa ka estilo sa eksternal nga estilo, kini nga mga instruksyon dili mao ang imong gisunod. Tan-awa Unsa ang usa ka External Style Sheet? hinoon.

Likayi ang Hitabo sa Pointer

Ang unang pamaagi nga atong magamit aron sa pagtago sa usa ka URL mao ang paghimo sa link nga walay buhaton. Sa diha nga ang mouse naglupad ibabaw sa link, wala kini magpakita kon unsa ang punto sa URL ug kini dili tugutan nga i-klik kini.

Isulat ang HTML sa husto

Usa sa web page, siguroha nga ang hyperlink mabasa nga sama niini:

ThoughtCo.com

Siyempre, ang "https://www.thoughtco.com/" kinahanglan magpunting sa aktwal nga URL nga gusto nimo nga gitago, ug ang ThoughtCo.com mahimong usbon sa bisan unsa nga pulong o hugpong sa mga pulong nga imong gusto nga naghulagway sa link.

Ang ideya dinhi mao nga ang aktibo nga klase magamit sa CSS sa ubos aron epektibong matago ang link.

Gamita kining CSS Code

Ang CSS code nagkinahanglan sa pagsulbad sa aktibo nga klase ug ipasabut sa browser nga ang hitabo sa pag-click sa link, kinahanglan nga "wala," sama niini:

.active {pointer-events: wala; cursor: default; }

Makita nimo kini nga pamaagi sa paglihok sa JSFiddle. Kung kuhaon nimo ang code sa CSS didto, ug dayon i-rerun ang data, ang kalit nga kalit nga mahimo nga mahimo nga masayon ​​ug mahimo gamiton. Kini tungod kay kung wala ipatuman ang CSS, ang maong pag-usab ang normal.

Pahinumdom: Hinumdomi nga kon ang tag-iya makakita sa source code sa panid, makita nila ang link ug nahibal-an gayud kung asa kini tungod kay sama sa atong makita sa ibabaw, ang code anaa pa, kini dili mahimo.

Bag-oha ang Kolor sa Link & # 39; s

Kasagaran, ang usa ka tigdisenyo sa web maghimo sa mga hyperlink nga usa ka lainlaing kolor kay sa background aron ang mga bisita makakita niini ug mahibal-an kung asa sila moadto. Bisan pa, ania kita aron pagtago sa mga sumpay , busa atong tan-awon kung unsaon pag-usab ang kolor aron itandi sa panid.

Paghatag og usa ka Custom Class

Kung atong gamiton ang sama nga panig-ingnan gikan sa unang pamaagi sa ibabaw, mahimo lamang nga usbon ang klase sa bisan unsa nga gusto nato aron nga ang mga espesyal nga mga link nga gitago.

Kon wala kami maggamit og usa ka klase ug hinoon magamit ang CSS gikan sa ubos ngadto sa matag link, dayon silang tanan mawala. Dili kana ang atong sunod dinhi, busa atong gamiton kining HTML code nga naggamit sa custom custom class:

ThoughtCo.com

Pangitaa Kon Unsang Kolor ang Gamiton

Sa dili pa kita mosulod sa angay nga code sa CSS aron matago ang link, kinahanglan nga mahibal-an nato kung unsang kolor ang gusto natong gamiton. Kon ikaw adunay lig-on nga background na, sama sa puti o itom, nan kini sayon ​​ra. Bisan pa, ang ubang mga espesyal nga kolor kinahanglan nga eksakto usab.

Pananglitan, kon ang kolor sa imong background adunay usa ka hex value nga e6ded1 , kinahanglan imong mahibal-an nga alang sa CSS code nga magtrabaho sa husto alang sa panid nga imong gusto nga mawala kini.

Adunay daghan niining mga gamit nga "picker sa kolor" o "eyedropper" nga magamit, usa niini gitawag nga ColorPick Eyedropper alang sa Chrome browser. Gamita kini sa pag-sampol sa kolor sa background sa imong web page aron makuha ang kolor sa hex.

Ipahiangay ang CSS sa Pag-usab sa Kolor

Karon nga naa nimo ang kolor nga kinahanglang adunay link, panahon na nga gamiton kana ug ang custom class value gikan sa ibabaw, isulat ang CSS code:

.hideme {color: # e6ded1; }

Kon ang kolor sa imong background yano sama sa puti o berde, dili nimo kinahanglan ibutang ang # nga ilhanan sa wala pa kini:

.hideme {color: white; }

Tan-awa ang sample code niining pamaagi niining JSFiddle.