Markøren angiver den position på skærmen, hvor brugeren kan klikke eller indtaste tekst. Der kan bruges forskellige markører til forskellige hjemmesidekomponenter. En udvikler skal sikre, at de markører, der bruges i applikationen, skal være attraktive. For eksempel kan en pegende håndmarkør bruges på knappen ved musebevægelse. Tekstindikatoren (blinkende linje) bruges på tekstboksen, hvor teksten skal indtastes.
Der er flere markørstile i CSS, der bruges ved blot at angive værdien af markøregenskaben. En udvikler kan dog oprette en tilpasset markør ved hjælp af CSS.
Denne studievejledning vil give om:
-
- CSS markør
- Brugerdefineret markør CSS
Før vi støder ind i emnet, lad os se nogle af CSS-markørformerne med et praktisk eksempel.
CSS markør
CSS ' cursoren ” egenskab har forskellige værdier, såsom en pointer, ingen, fremskridt og mere. Lad os oprette en tabel, der indeholder rækker, hvor forskellige markører vil blive vist ved musebevægelse.
Eksempel: Oprettelse af en tabel, der repræsenterer forskellige CSS-markører i HTML
Tilføj først elementet
| tags. Andre | |||
|---|---|---|---|
tags til at udfylde kolonnerne med data.
| -tag repræsenterer knapelementerne, der anvendes med en CSS ' cursoren ” ejendom med forskellige værdier.
| HTML-koden for ovenstående scenarie er givet nedenfor: < bord >< tr > < th stil = 'bredde: 200px;' > css markørvælger th > < th stil = 'bredde: 200px;' > markør stil th > tr > < tr > < td > markør: markør td > < td >< knap stil = 'cursor: pointer;' > pointer knap > td > tr > < tr > < td > markør: fremskridt td > < td >< knap stil = 'cursor: fremskridt;' > fremskridt knap > td > tr > < tr > < td > markør: ikke tilladt td > < td >< knap stil = 'cursor: ikke tilladt;' > ikke tilladt knap > td > tr > < tr > < td > markør: ingen td > < td >< knap stil = 'cursor: ingen;' > ingen knap > td > tr > < tr > < td > markør: flytte td > < td >< knap stil = 'cursor: flyt;' > bevæge sig knap > td > tr > < tr > < td > markør: grab td > < td >< knap stil = 'cursor: grab;' > tag fat knap > td > tr > < tr > < td > markør: kopi td > < td >< knap stil = 'cursor: kopi;' > kopi knap > td > tr > < tr > < td > markør: col-resize td > < td >< knap stil = 'cursor: col-resize;' > col-tilpasning knap > td > tr > < tr > < td > markør: række-ændre størrelse td > < td >< knap stil = 'cursor: række-ændre størrelse;' > række-ændre størrelse knap > td > tr > < tr > < td > markør: tekst td > < td >< knap stil = 'cursor: tekst;' > tekst knap > td > tr > bord > Stil 'alle' elementer * {polstring: 0 ; margin: 0 ; font-familie: Arial, Helvetica, sans-serif; }
Stil 'bord' Element bord {margin: 0px auto; kant: 1px solid gainsboro; }
“ margen ” egenskaben opfører sig som angivet ovenfor. Stil 'td' Element td {tekst-align: center; } anvendes med egenskaben ' tekstjustering ' med værdien ' centrum ”. Det vil justere kolonnens tekst i midten.
| Stil 'knap' Element knap {baggrundsfarve: kadetblå; polstring: 10px 10px; farve: #ffffff; bredde: 150px; }
Ovenstående kode vil generere følgende resultat: Brugerdefineret markør CSSUdviklerne skal bruge passende markører til deres applikationer. Markører bør gøres attraktive for at få brugernes opmærksomhed. Desuden kan den brugerdefinerede markør oprettes til dette formål. Se eksemplet nedenfor! Eksempel: Hvordan oprettes brugerdefineret markør med CSS? Tilføj to div-elementer i HTML. Et med klassen' cirkel ' og den anden med klassen ' punkt ”. HTML < div klasse = 'cirkel' > div >< div klasse = 'punkt' > div > Stil 'body' Element legeme {højde: 100vh; } Stil “cirkel” div .cirkel {bredde: 20px; højde: 20px; kant: 2px ensfarvet hvid; grænse-radius: halvtreds % ; }
Stil “punkt” div .punkt {bredde: 5px; højde: 5px; baggrundsfarve: hvid; grænse-radius: halvtreds % ; }
Den givne kode vil vise følgende markør på websiden: JavaScript < manuskript >const cursorCircle = document.querySelector ( '.cirkel' ) ; const cursorPoint = document.querySelector ( '.punkt' ) ; const moveCursor = ( og ) = > { const mouseY = e.clientY; const mouseX = e.clientX; cursorCircle.style.transform = ` Oversætte ( ${mouseX} px, ${mouseY} px ) ` ; cursorPoint.style.transform = ` Oversætte ( ${mouseX} px, ${mouseY} px ) ` ; } window.addEventListener ( 'mousemove' , flyt markøren ) manuskript >
Efter at have angivet ovenstående kodeblokke, vil markøren automatisk bevæge sig på skærmen som vist nedenfor: KonklusionCSS ' cursoren ” egenskaben har adskillige værdier, der angiver forskellige markørstile. Men ved at bruge HTML-elementerne og CSS-egenskaberne kan vi lave tilpassede markører. Derefter implementeres JavaScript-kode for at aktivere dens funktionalitet. Denne undersøgelse har vist, hvordan man laver brugerdefinerede CSS-markører med et praktisk eksempel. |
