Markøren indikerer plasseringen på skjermen der brukeren kan klikke eller legge inn tekst. Det kan være forskjellige markører som brukes til forskjellige nettstedskomponenter. En utvikler må sørge for at markørene som brukes i applikasjonen må være attraktiv. For eksempel kan en pekende håndmarkør brukes på knappen på musens sveve. Teksten (blinkende linje) indikatoren brukes på tekstboksen der teksten skal legges inn.
Det er flere markørstiler i CSS som brukes ved bare å spesifisere verdien av markøregenskapen. Imidlertid kan en utvikler lage en tilpasset markør ved hjelp av CSS.
Denne studieguiden vil gi på:
CSS markør
Tilpasset markør CSS
La oss se noen av CSS -markørformene før du støter på emnet, og se noen av CSS -markørformene med et praktisk eksempel.
CSS markør
CSS “markør”Eiendom har forskjellige verdier, for eksempel en peker, ingen, fremgang og mer. La oss lage en tabell som inneholder rader som forskjellige markører vil vises på musen sveve.
Eksempel: Opprette en tabell som representerer forskjellige CSS -markører i HTML
Først, legg til
element i HTML. Inne i dette elementet:
De
Tag vil bli brukt til å lage rader.
Den første raden inneholder overskriftene.
Disse overskriftene er spesifisert ved å bruke
Tagger. Annen
Tagger inneholder to
Tagger for å fylle kolonnene med data.
Den andre
TAG representerer knappelementene som brukes med en CSS “markør”Eiendom med forskjellige verdier.
HTML -koden for ovennevnte scenario er gitt nedenfor:
CSS markørvelger
markørstil
Markør: peker
Markør: Fremgang
Markør: Ikke tillatt
Markør: Ingen
Markør: Flytt
Markør: Grab
Markør: Kopi
Markør: Col-R-Stize
Markør: Rad-størrelse
Markør: tekst
Ovennevnte kode vil generere følgende resultat:
I neste avsnitt vil vi bruke forskjellige stiler på HTML -elementene.
Alle HTML -elementene brukes med CSS -stiler som er forklart nedenfor:
“polstring”Eiendom med“0”Verdien inkluderer ingen plass rundt elementets innhold.
“margin”Eiendom med“0”Verdien gir ingen plass utenfor hvert av elementene.
“Font-familie”Eiendom tildeles en verdi”Arial, Helvetica, Sans-serif”. Listen over fontstiler er gitt for å sikre at hvis den første stilen ikke støttes av nettleseren, må andre stiler brukes.
Knappelementet som brukes i ovennevnte HTML -kode er stylet med nye CSS -egenskaper som er forklart nedenfor:
“bakgrunnsfarge”Angir fargen til elementets bakgrunn.
“polstring”Med verdiene tildelt som“10px 10px”Legger til plass på 10px i toppbunnen og 10px på venstre høyre side av elementets elementer.
“farge”Justerer elementets skriftfarge.
“bredde”Er eiendommen som justerer elementets bredde.
Ovennevnte kode vil generere følgende resultat:
Så langt har vi diskutert markørene som er levert av CSS. I den kommende delen vil eksemplet beskrive hvordan du lager en tilpasset markør med CSS.
Tilpasset markør CSS
Utviklerne må bruke passende markører for applikasjonene sine. Markører bør gjøres attraktive for å få oppmerksomhet fra brukerne. Dessuten kan den tilpassede markøren opprettes for dette formålet.
Se på eksemplet nedenfor!
Eksempel: Hvordan lage tilpasset markør med CSS?
I HTML, legg til to DIV -elementer. En med klassen “sirkel”Og den andre med klassen“punkt”.
Html
La oss gå videre mot CSS -delen.
Stil "kropp" -element
kropp Høyde: 100VH;
Kroppselementet i HTML -filen brukes med stilen "høyde”Eiendom for å sette elementets høyde.
Div -elementet med klassepunkt er utstyrt med forskjellige egenskaper som er beskrevet nedenfor:
“bakgrunnsfarge”Eiendom spesifiserer fargen på elementets bakgrunn.
“Border-Radius”Setter elementets kanter rundt.
Andre egenskaper vil fungere på samme måte som diskutert.
Den gitte koden vil vise følgende markør på websiden:
Vi har opprettet markøren ved hjelp av HTML og CSS. Nå, i neste avsnitt, skrives JavaScript -koden for å legge til den nødvendige funksjonaliteten til markøren.
JavaScript
Beskrivelsen av ovennevnte JavaScript -kode er gitt nedenfor:
“”Tag er sammenkoblet med tag, som brukes til å skrive JavaScript -kode.
“const”Søkeord identifiserer at Const -nøkkelordet etterfulgt av en variabel ikke kan tilordnes tilordnes.
“dokument.QuerySelector ('.sirkel')”Returnerer Circle Div -elementet som samsvarer med den spesifiserte velgeren i dokumentet.
“dokument.QuerySelector ('.punkt')”Returnerer Point Div -elementet som samsvarer med den spesifiserte velgeren i dokumentet.
“e.klient”Returnerer den vertikale koordinaten da mushendelsen ble utløst.
“e.ClientX”Returnerer den horisontale koordinaten når musehendelsen utløses.
“CursorCircle.stil.forvandle”Circle Div brukes med stiltransform.
“markørpunkt.stil.forvandle”Point Div brukes med stiltransform.
“Oversett ($ Mousex PX, $ Mousey PX)”Verdien av transformasjonseiendommen setter de horisontale og vertikale koordinatene.
“vindu.AddEventListener ('Mus', Movcursor)”Event Listener Method vil lytte til musebevegelsen. Det er en del av det globale vindusobjektet.
Etter å ha gitt ovennevnte kodeblokker, vil markøren automatisk bevege seg på skjermen som vist nedenfor:
Det er kult! Vi har laget en tilpasset markør med forskjellige CSS -egenskaper.
Konklusjon
CSS “markør”Eiendom har mange verdier som indikerer forskjellige markørstiler. Ved å bruke HTML -elementene og CSS -egenskapene, kan vi imidlertid lage tilpassede markører. Deretter implementeres JavaScript -kode for å aktivere funksjonaliteten. Denne studien har vist hvordan man lager tilpassede CSS -markører med et praktisk eksempel.
