Hvordan deaktivere en lenke med bare CSS

Hvordan deaktivere en lenke med bare CSS
Hvert nettsted inneholder mange lenker på hvert grensesnitt som leder brukeren til andre websider. For eksempel, lenker for å besøke et annet nettsted for referanse mens du leser et blogginnlegg, besøk sosiale mediekontoer til et merke mens du besøker nettstedene sine, og last ned dataprogramvare osv. Men hvis det kreves å deaktivere en lenke, brukes CSS Pointer Event -egenskapen.

Følgende innlegg vil forklare hvordan Pointer Event -egenskapen brukes i en kode for å deaktivere en lenke i et HTML -dokument.

Deaktivere en lenke ved hjelp av CSS

CSS -bibliotek brukes i kombinasjon med andre språk som HTML. Så hvis et HTML-dokument har en lenke for å besøke noen annen webside direkte, brukes CSS Pointer-Events-egenskapen til å deaktivere en lenke:

Peker-hendelser: Ingen;
Markør: standard;

Hvordan du bruker pekerhendelser egenskap i kode?

CSS-stilerklæringen der vi vil legge til pekerhendelsesegenskapen for å deaktivere lenken, skal referere til klassen som inneholder lenken. For eksempel, hvis vi har en klasse som heter "Not-Active" som inneholder lenken:

Deaktiver lenken ved hjelp av CSS



Lenke:
Klikk her

I koden ovenfor har den klikkbar lenken en "Not-Active" som vil bli brukt til å få tilgang til dette HTML-elementet.

Ovennevnte kode genererer følgende utdata:

Å klikke på lenken leder brukeren til Googles søkemotor:



Peker-hendelsesegenskapen

  • Inne i et CSS -stilelement, skriv pekerhendelsesegenskapen (Pointer-Event: Ingen) mens du refererer til klassen (ikke-aktiv) som inneholder lenken som skal deaktiveres.
  • Angi markøren som noen av alternativene som standard, ingen, peker osv.

Etter å ha utført koden, vil det ikke være noen endring i den grafiske visningen av lenken utenfra, men når brukeren klikker på den, vil den ikke gjøre noe:

Dette var den enkleste måten å deaktivere lenken i en kode ved hjelp av CSS -setninger.

Konklusjon

En lenke som leder brukeren til andre websider kan enkelt deaktiveres gjennom en enkel CSS “Pointer-Events: None” -egenskaper. Dette krever ingen endringer i logikken i koden eller klassen som lenken er opprettet. Det kreves en enkel pekerhendelsesegenskap i stilelementet som refererer til klassen som inneholder lenken.