Aangepaste CSS-cursor

Aangepaste Css Cursor



De cursor geeft de positie op het scherm aan waar de gebruiker kan klikken of tekst kan invoeren. Er kunnen verschillende cursors worden gebruikt voor verschillende websitecomponenten. Een ontwikkelaar moet ervoor zorgen dat de cursors die in de applicatie worden gebruikt, aantrekkelijk moeten zijn. Een wijzende handcursor kan bijvoorbeeld worden gebruikt op de knop bij muisaanwijzer. De tekstindicator (knipperende lijn) wordt gebruikt op het tekstvak waar de tekst moet worden ingevoerd.

Er zijn verschillende cursorstijlen in CSS die worden gebruikt door alleen de waarde van de cursoreigenschap op te geven. Een ontwikkelaar kan echter een aangepaste cursor maken met behulp van CSS.





Deze studiegids gaat in op:



    • CSS-cursor
    • Aangepaste cursor-CSS

Laten we, voordat we op het onderwerp ingaan, enkele van de CSS-cursorvormen bekijken met een praktisch voorbeeld.



CSS-cursor

De CSS “ cursor ” eigenschap heeft verschillende waarden, zoals een aanwijzer, geen, voortgang en meer. Laten we een tabel maken met rijen waarop verschillende cursors worden weergegeven bij muisaanwijzer.



Voorbeeld: een tabel maken met verschillende CSS-cursors in HTML

Voeg eerst het

-element in HTML toe. Binnen dit element:



    • De
tag wordt gebruikt om rijen te maken.
  • De eerste rij bevat de koppen.
  • Deze koppen worden gespecificeerd door gebruik te maken van de
    • -tags bevatten twee
    tags. Andere
    -tags om de kolommen met gegevens te vullen.
  • De tweede
    		• tag vertegenwoordigt de knopelementen die worden toegepast met een CSS “ cursor ” onroerend goed met verschillende waarden.

    De HTML-code voor het bovenstaande scenario wordt hieronder weergegeven:

    < tafel >
    < tr >
    < e stijl = 'breedte: 200px;' > css cursorkiezer e >
    < e stijl = 'breedte: 200px;' > cursorstijl e >
    tr >
    < tr >
    < td > cursor: aanwijzer td >
    < td >< knop stijl = 'cursor: aanwijzer;' > wijzer knop > td >
    tr >
    < tr >
    < td > cursor: voortgang td >
    < td >< knop stijl = 'cursor: voortgang;' > voortgang knop > td >
    tr >
    < tr >
    < td > cursor: niet toegestaan td >
    < td >< knop stijl = 'cursor: niet toegestaan;' > niet toegestaan knop > td >
    tr >
    < tr >
    < td > cursor: geen td >
    < td >< knop stijl = 'cursor: geen;' > geen knop > td >
    tr >
    < tr >
    < td > cursor: verplaatsen td >
    < td >< knop stijl = 'cursor: verplaatsen;' > Actie knop > td >
    tr >
    < tr >
    < td > cursor: grijpen td >
    < td >< knop stijl = 'cursor: grijpen;' > grijpen knop > td >
    tr >
    < tr >
    < td > cursor: kopiëren td >
    < td >< knop stijl = 'cursor: kopiëren;' > kopiëren knop > td >
    tr >
    < tr >
    < td > cursor: formaat wijzigen td >
    < td >< knop stijl = 'cursor: formaat wijzigen;' > col-formaat wijzigen knop > td >
    tr >
    < tr >
    < td > cursor: formaat rij wijzigen td >
    < td >< knop stijl = 'cursor: rij-formaat wijzigen;' > rij-formaat wijzigen knop > td >
    tr >
    < tr >
    < td > cursor: tekst td >
    < td >< knop stijl = 'cursor: tekst;' > tekst knop > td >
    tr >
    tafel >


    De bovenstaande code zal het volgende resultaat genereren:


    In de volgende sectie zullen we verschillende stijlen toepassen op de HTML-elementen.

    Stijl 'alle' elementen

    * {
    opvulling: 0 ;
    marge: 0 ;
    lettertypefamilie: Arial, Helvetica, schreefloos;
    }


    Alle HTML-elementen worden toegepast met CSS-stijlen die hieronder worden uitgelegd:

      • “ opvulling ” woning met “ 0 ” waarde bevat geen spatie rond de inhoud van het element.
      • “ marge ” woning met “ 0 ” waarde voegt geen ruimte toe buiten elk van de elementen.
      • “ font-familie ” eigenschap krijgt een waarde toegewezen “ Arial, Helvetica, schreefloos ”. De lijst met lettertypestijlen wordt gegeven om ervoor te zorgen dat als de eerste stijl niet door de browser wordt ondersteund, andere stijlen moeten worden toegepast.

    Stijl 'tafel' Element

    tafel {
    marge: 0px automatisch;
    rand: 1px solide gainsboro;
    }


    Het HTML-tabelelement wordt toegepast met de CSS-eigenschappen die hieronder worden beschreven:

      • “ grens ” eigendom is ingesteld met de waarde “ 1px solide gainsboro ” die respectievelijk de randbreedte, randstijl en randkleur vertegenwoordigt.

    “ marge ” eigenschap gedraagt ​​zich zoals hierboven gespecificeerd.

    Stijl 'td' -element

    td {
    tekst uitlijnen: centreren;
    }


    Het

    		element wordt toegepast met de eigenschap “ tekst uitlijnen ” met de waarde “ centrum ”. Het zal de tekst van de kolom in het midden uitlijnen.

    Stijl 'knop' Element

    knop {
    achtergrondkleur: kadetblauw;
    opvulling: 10px 10px;
    kleur: #ffffff;
    breedte: 150px;
    }


    Het knopelement dat in de bovenstaande HTML-code wordt gebruikt, is vormgegeven met nieuwe CSS-eigenschappen die hieronder worden uitgelegd:

      • “ Achtergrond kleur ” specificeert de kleur van de achtergrond van het element.
      • “ opvulling ” met de waarden toegewezen als “ 10px 10px ” voegt ruimte toe van 10 px bovenaan en onderaan en 10 px aan de links-rechtszijden van de items van het element.
      • “ kleur ” past de letterkleur van het element aan.
      • “ breedte ” is de eigenschap die de breedte van het element aanpast.

    De bovenstaande code zal het volgende resultaat genereren:


    Tot nu toe hebben we de cursors besproken die door CSS worden geleverd. In het volgende gedeelte wordt in het voorbeeld beschreven hoe u een aangepaste cursor kunt maken met CSS.

    Aangepaste cursor-CSS

    De ontwikkelaars moeten geschikte cursors gebruiken voor hun toepassingen. Cursors moeten aantrekkelijk worden gemaakt om de aandacht van de gebruikers te trekken. Bovendien kan hiervoor de aangepaste cursor worden gemaakt.

    Kijk naar onderstaand voorbeeld!

    Voorbeeld: Hoe maak je een aangepaste cursor met CSS?

    Voeg in HTML twee div-elementen toe. Een met de klas “ cirkel ” en de ander met de klas “ punt ”.

    HTML

    < div klas = 'cirkel' > div >
    < div klas = 'punt' > div >


    Laten we verder gaan naar de CSS-sectie.

    Stijl 'body' -element

    lichaam {
    hoogte: 100vh;
    }


    Het body-element van het HTML-bestand wordt toegepast met de stijl ' hoogte ” eigenschap voor het instellen van de hoogte van het element.

    Stijl “cirkel” div

    .cirkel {
    breedte: 20px;
    hoogte: 20px;
    rand: 2px effen wit;
    border-radius: vijftig % ;
    }


    Hieronder vindt u de uitleg van de CSS-eigenschappen die worden toegepast op het div-element met klasse ' cirkel ”:

      • “ breedte ” eigenschap past de breedte van het element aan.
      • “ grens ” eigendom met de waarde gespecificeerd als “ 2px effen wit ” staat voor de randbreedte, randstijl en kleur.
      • “ grensradius ” eigenschap verandert de rand van het element rond.

    Stijl 'punt' div

    .punt {
    breedte: 5px;
    hoogte: 5px;
    achtergrondkleur: wit;
    border-radius: vijftig % ;
    }


    Het div-element met class point is voorzien van verschillende eigenschappen die hieronder worden beschreven:

      • “ Achtergrond kleur ” eigenschap specificeert de kleur van de achtergrond van het element.
      • “ grensradius ” maakt de randen van het element rond.
      • Andere eigenschappen zullen hetzelfde werken als besproken.

    De gegeven code zal de volgende cursor op de webpagina weergeven:


    We hebben de cursor gemaakt met behulp van HTML en CSS. Nu, in de volgende sectie, wordt de JavaScript-code geschreven om de vereiste functionaliteit aan de cursor toe te voegen.

    javascript

    < script >
    const cursorCircle = document.querySelector ( '.cirkel' ) ;
    const cursorPoint = document.querySelector ( '.punt' ) ;
    const zet Cursor = ( en ) = > {
    const mouseY = e.clientY;
    const mouseX = e.clientX;

    cursorCircle.style.transform = ` vertalen ( ${muisX} px, ${muisY} px ) ` ;
    cursorPoint.style.transform = ` vertalen ( ${muisX} px, ${muisY} px ) ` ;
    }
    venster.addEventListener ( 'muisbewegen' , verplaatsCursor )
    script >


    De beschrijving van de bovenstaande JavaScript-code wordt hieronder gegeven:

      • “ -tag, die wordt gebruikt om JavaScript-code te schrijven.
      • “ const ” trefwoord geeft aan dat het trefwoord const gevolgd door een variabele niet opnieuw kan worden toegewezen.
      • “ document.querySelector(‘.circle’) ” retourneert het circle div-element dat overeenkomt met de opgegeven selector in het document.
      • “ document.querySelector(‘.punt’) ” retourneert het point div-element dat overeenkomt met de opgegeven selector in het document.
      • “ const moveCursor = (e) => ” deze functie specificeert de cursorfunctie.
      • “ e.clientY ” retourneert de verticale coördinaat toen de muisgebeurtenis werd geactiveerd.
      • “ e.clientX ” geeft de horizontale coördinaat terug wanneer de muisgebeurtenis wordt geactiveerd.
      • “ cursorCircle.style.transform ” de cirkel-div wordt toegepast met stijltransformatie.
      • “ cursorPoint.style.transform ” de punt div wordt toegepast met stijltransformatie.
      • “ vertalen(${mouseX}px, ${mouseY}px) ” waarde van de transform eigenschap stelt de horizontale en verticale coördinaten in.
      • “ window.addEventListener(‘mouse’, moveCursor) ”gebeurtenislistenermethode luistert naar de muisbeweging. Het maakt deel uit van het globale vensterobject.

    Na het verstrekken van de bovenstaande codeblokken, zal de cursor automatisch op het scherm bewegen zoals hieronder getoond:


    Dat is cool! We hebben een aangepaste cursor gemaakt met verschillende CSS-eigenschappen.

    Conclusie

    De CSS “ cursor ” eigenschap heeft talloze waarden die verschillende cursorstijlen aangeven. Door gebruik te maken van de HTML-elementen en CSS-eigenschappen kunnen we echter aangepaste cursors maken. Vervolgens wordt JavaScript-code geïmplementeerd om de functionaliteit te activeren. Deze studie heeft gedemonstreerd hoe u aangepaste CSS-cursors kunt maken met een praktisch voorbeeld.

    Ander

    Categorie

    Populaire Berichten

    Hoe horizontale en verticale ruimte tussen elementen in Tailwind toevoegen?

    Kan Raspberry Pi worden gevoed via USB

    LWC – Navigatiedienst

    C++ Getters en Setters-methoden

    Linken naar een PDF-bestand met HTML

    Wat is het verschil tussen Arduino Potentiometer en Rotary Encoder

    Werken met lege en containertags in HTML

    Zsh Vim-modus

    Hoe de ID van de aangeklikte knop te krijgen met JavaScript/jQuery?

    Hoe u kunt controleren welke Ubuntu-versie u gebruikt

    Wat is verantwoorde AI?

    Salesforce Apex – Tekenreeksklasse

    Wat is de optietag in HTML?

    Voer de PostGIS-server uit als een Docker-container

    Bestanden en mappen een naam geven – Raspberry Pi

    Hoe te werken met normale verdeling in MATLAB met behulp van fitdist

    Splits een string met meerdere scheidingstekens met behulp van JavaScript

    Atlas-downloadlogboeken

    Hoe gebruik je het /kill-commando in Minecraft?

    Leg het commando 'git checkout' uit met voorbeelden | Afrekenen Filiaal, Afrekenen Commit