Ferbergje mei keppelings mei CSS

Ferbergje mei in keppeling mei CSS kin in oantal manieren dien wurde, mar sille wy sjogge op twa metoaden wêrmei in URL-adres folslein ferstjerre wurde kin. As jo ​​in jeugdjacht of easter egg op jo side meitsje wolle, is dit in ynteressante manier om keppelingen te ferbergjen.

De earste wize is mei "none" as de pointer-eveneminten CSS eigendom. De oare is troch gewoan de tekst te kleuren om de eftergrûn fan 'e side te passen.

Tink derom dat gjin metoade de link folslein ferdwine kin fan fûn wurde as jo sykje nei it boarne koade. Dochs hawwe besikers net in ienfâldige, rjochtfeardige manier wêr 't it te sjen is, en jo begjinnende besikers sil gjin oantsjutte hawwe hoe't jo de link fine.

Taljochting: As jo ​​sykje foar ynstruksjes oer hoe jo in eksterne stylblêd te keppeljen, dan binne dizze ynstruksjes net wat jo binne. Sjoch wat in eksterne stylblêd is? ynstee.

It Pointer-event útsette

De earste metoade dy't wy brûke kinne om in URL te ferstopjen is de link te meitsjen neat te meitsjen. As de mûs oer de keppeling hinkt, sil it net sjen wat de URL oanjout en it sil jo net klikje.

Skriuw it HTML korrekt

Ien de webside, soargje derfoar dat de hyperlink sa is:

ThoughtCo.com

Fansels moat "https://www.thoughtco.com/" oan de werklik URL sjen dy't jo ferburgen wolle, en ThoughtCo.com kin feroare wurde nei elke wurd of wurd dat jo graach de keppeling beskriuwe.

It idee hjir is dat de aktive klasse wurde brûkt mei de CSS hjirûnder om de link effektyf te ferbergjen.

Brûk dit CSS-koade

De CSS-koade moat de aktive klasse oanpasse en ferklearje oan de blêder dat it barren op 'e keppeling klikke, "gjin," sa wêze moat:

.active {pointer-events: none; cursor: standert; }

Jo kinne dizze metoade sjen yn aksje oer by JSField. As jo ​​de CSS-koade fuortsmite, en dan de gegevens werneare, wurdt de keppeling ynienen klikber en brûkber. Dit is, om't de CSS net tapast wurdt, behannelet de link normaal.

Tink derom: Tink derom dat as de brûker de boarne koade sjogge, sille se de link sjogge en witte wêr't it giet om't wy as boppe sjen, de koade is noch altyd, it is gewoan net brûkber.

Feroarje de keppeling 's Colour

Normaal, in webûntwerper sil hyperlinks meitsje fan in oare kleur as de eftergrûn, sadat de besikers har eins sjen kinne en witte wêr't se hinne gean. Wy binne hjir lykwols om keppelingen te ferbergjen , dus litte wy sjen hoe't jo de kleur feroarje moatte oan 'e side fan' e side.

In eigen klasse definiearje

As wy itselde foarbyld fan 'e earste metoade hjirboppe brûke, kinne wy ​​de klasse gewoanlik feroarje om wat wy wolle wolle dat allinich spesjale keppelings ferburgen binne.

As wy in klasse gebrûk makken en de CSS fan ûnderen oan elke keppeling tapast, dan allegear ferdwine. Dit is net wat wy hjir folgje, dus sille wy dizze HTML-koade brûke, dy't de brûkte hideme-klasse brûke:

ThoughtCo.com

Sykje út wêrfoar kleur te brûken

Foardat wy de passende CSS-koade ynfiere om de keppeling te ferstopjen, moatte wy útfine hoefolle kleur wy wolle brûke. As jo ​​al in solide eftergrûn hawwe, lykas wyt of swart, dan is it maklik. Dochs moatte oare spesjale kleuren ek genôch wêze.

Bygelyks, as jo eftergrûnkleur hat in hexwearde fan e6ded1 , moatte jo witte dat dizze foar de CSS koade goed wurket foar de side dy't jo wolle dat it ferdwynt.

Der binne genôch dizze "color picker" of "eyedropper" -tels beskikber, ien fan dy wurdt ColorPick Eyedropper neamd foar de Chrome-blêder. Brûk dit om de eftergrûnkleur fan jo webside te probearjen om de hexkleur te krijen.

Oanpasse oan CSS om de kleur te feroarjen

No dat jo de kleur hawwe dat de keppeling wêze moat, it is tiid om dit en de brûkte klassewearde fan boppen te brûken, de CSS-koade te skriuwen:

.hideme {color: # e6ded1; }

As jo ​​eftergrûnkleur ienfâldich is as wyt of grien binne, moatte jo it # teken net foardogge:

.hideme {color: white; }

Sjoch dizze modus dizze metoade yn dizze JSField.