Cursor CSS personalizat

Cursor Css Personalizat



Cursorul indică poziția de pe ecran în care utilizatorul poate face clic sau introduce text. Pot fi diferite cursore utilizate pentru diferite componente ale site-ului web. Un dezvoltator trebuie să se asigure că cursoarele folosite în aplicație trebuie să fie atractive. De exemplu, un cursor cu mâna îndreptată poate fi folosit pe butonul de la trecerea mouse-ului. Indicatorul text (linie intermitentă) este utilizat în caseta de text în care urmează să fie introdus textul.

Există mai multe stiluri de cursor în CSS utilizate doar prin specificarea valorii proprietății cursorului. Cu toate acestea, un dezvoltator poate crea un cursor personalizat folosind CSS.





Acest ghid de studiu va oferi despre:



    • cursor CSS
    • Cursor personalizat CSS

Înainte de a intra în subiect, să vedem câteva dintre formele cursorului CSS cu un exemplu practic.



cursor CSS

CSS „ cursor ” proprietatea are valori diferite, cum ar fi un pointer, niciunul, progres și multe altele. Să creăm un tabel care conține rânduri pe care vor fi afișate diferite cursoare la trecerea mouse-ului.



Exemplu: Crearea unui tabel reprezentând diferiți cursori CSS în HTML

Mai întâi, adăugați elementul

în HTML. În interiorul acestui element:



    • Eticheta
va fi utilizată pentru a crea rânduri.
  • Primul rând conține titlurile.
  • Aceste titluri sunt specificate prin utilizarea etichetelor
    • conțin două etichete
    . Alte etichete
    pentru a popula coloanele cu date.
  • A doua etichetă
    		• reprezintă elementele butonului care sunt aplicate cu un CSS „ cursor ” proprietate cu valori diferite.

    Codul HTML pentru scenariul de mai sus este prezentat mai jos:

    < masa >
    < tr >
    < th stil = 'lățime: 200px;' > selectorul cursorului css th >
    < th stil = 'lățime: 200px;' > stilul cursorului th >
    tr >
    < tr >
    < td > cursor: pointer td >
    < td >< buton stil = 'cursor: pointer;' > indicator buton > td >
    tr >
    < tr >
    < td > cursor: progres td >
    < td >< buton stil = 'cursor: progres;' > progres buton > td >
    tr >
    < tr >
    < td > cursor: nepermis td >
    < td >< buton stil = 'cursor: nepermis;' > nepermis buton > td >
    tr >
    < tr >
    < td > cursor: niciunul td >
    < td >< buton stil = 'cursor: niciunul;' > nici unul buton > td >
    tr >
    < tr >
    < td > cursor: mutare td >
    < td >< buton stil = 'cursor: mutare;' > mutare buton > td >
    tr >
    < tr >
    < td > cursor: apuca td >
    < td >< buton stil = 'cursor: apuca;' > apuca buton > td >
    tr >
    < tr >
    < td > cursor: copiere td >
    < td >< buton stil = 'cursor: copiere;' > copie buton > td >
    tr >
    < tr >
    < td > cursor: col-redimensionare td >
    < td >< buton stil = 'cursor: col-resize;' > col-redimensionare buton > td >
    tr >
    < tr >
    < td > cursor: redimensionare rând td >
    < td >< buton stil = 'cursor: row-resize;' > redimensionare rând buton > td >
    tr >
    < tr >
    < td > cursor: text td >
    < td >< buton stil = 'cursor: text;' > text buton > td >
    tr >
    masa >


    Codul de mai sus va genera următorul rezultat:


    În secțiunea următoare, vom aplica diferite stiluri elementelor HTML.

    Stilează „toate” elementele

    * {
    umplutura: 0 ;
    marja: 0 ;
    familie de fonturi: Arial, Helvetica, sans-serif;
    }


    Toate elementele HTML sunt aplicate cu stiluri CSS care sunt explicate mai jos:

      • „ umplutura ” proprietate cu ” 0 ” valoarea nu include spațiu în jurul conținutului elementului.
      • „ marginea ” proprietate cu ” 0 ” valoarea nu adaugă spațiu în afara fiecăruia dintre elemente.
      • „ familie de fonturi ” proprietății i se atribuie o valoare ” Arial, Helvetica, sans-serif ”. Lista stilurilor de fonturi este dată pentru a se asigura că, dacă primul stil nu este acceptat de browser, trebuie aplicate alte stiluri.

    Element de stil „masă”.

    masa {
    marjă: 0px automat;
    chenar: 1px solid gainsboro;
    }


    Elementul tabel HTML este aplicat cu proprietățile CSS descrise mai jos:

      • „ frontieră „proprietatea este setată cu valoarea „ 1px solid gainsboro ” care reprezintă lățimea chenarului, stilul chenarului și, respectiv, culoarea chenarului.

    „ marginea ” proprietatea se comportă așa cum este specificat mai sus.

    Element de stil „td”.

    td {
    text-align: centru;
    }


    Elementul

    		este aplicat cu proprietatea „ aliniere text „cu valoarea „ centru ”. Acesta va alinia textul coloanei în centru.

    Element „buton” de stil

    buton {
    culoare de fundal: cadetblue;
    umplutură: 10px 10px;
    culoare: #ffffff;
    latime: 150px;
    }


    Elementul buton folosit în codul HTML de mai sus este stilat cu proprietăți CSS noi, care sunt explicate mai jos:

      • „ culoare de fundal ” specifică culoarea fundalului elementului.
      • „ umplutura ” cu valorile atribuite ca “ 10px 10px ” adaugă spațiu de 10px în partea de sus-jos și de 10px în partea stângă-dreapta a elementelor elementului.
      • „ culoare ” ajustează culoarea fontului elementului.
      • „ lăţime ” este proprietatea care ajustează lățimea elementului.

    Codul de mai sus va genera următorul rezultat:


    Până acum, am discutat despre cursoarele furnizate de CSS. În secțiunea următoare, exemplul va descrie cum să creați un cursor personalizat cu CSS.

    Cursor personalizat CSS

    Dezvoltatorii trebuie să folosească cursoare adecvate pentru aplicațiile lor. Cursoarele trebuie făcute atractive pentru a atrage atenția utilizatorilor. Mai mult, cursorul personalizat poate fi creat în acest scop.

    Uită-te la exemplul de mai jos!

    Exemplu: Cum se creează un cursor personalizat cu CSS?

    În HTML, adăugați două elemente div. Una cu clasa ' cerc ” iar celălalt cu clasa ” punct ”.

    HTML

    < div clasă = 'cerc' > div >
    < div clasă = 'punct' > div >


    Să mergem mai departe către secțiunea CSS.

    Element de stil „corp”.

    corp {
    inaltime: 100vh;
    }


    Elementul body al fișierului HTML este aplicat cu stilul „ înălţime ” proprietate pentru setarea înălțimii elementului.

    Stil „cerc” div

    .cerc {
    latime: 20px;
    înălțime: 20px;
    chenar: 2px alb solid;
    raza de frontieră: cincizeci % ;
    }


    Mai jos este explicația proprietăților CSS care sunt aplicate elementului div având clasa „ cerc ”:

      • „ lăţime ”proprietatea ajustează lățimea elementului.
      • „ frontieră ” proprietate cu valoarea specificată ca “ 2px alb solid ” reprezintă lățimea chenarului, stilul chenarului și culoarea.
      • „ hotar-raza ”proprietatea schimbă rotunda chenarului elementului.

    Stil „punct” div

    .punct {
    latime: 5px;
    înălțime: 5px;
    culoare de fundal: alb;
    raza de frontieră: cincizeci % ;
    }


    Elementul div cu punct de clasă este prevăzut cu diferite proprietăți care sunt descrise mai jos:

      • „ culoare de fundal ”proprietatea specifică culoarea fundalului elementului.
      • „ hotar-raza ” rotunjește marginile elementului.
      • Alte proprietăți vor funcționa la fel ca cele discutate.

    Codul dat va afișa următorul cursor pe pagina web:


    Am creat cursorul folosind HTML și CSS. Acum, în secțiunea următoare, codul JavaScript este scris pentru a adăuga funcționalitatea necesară la cursor.

    JavaScript

    < scenariu >
    const cursorCircle = document.querySelector ( '.cerc' ) ;
    const cursorPoint = document.querySelector ( '.punct' ) ;
    const moveCursor = ( și ) = > {
    const mouseY = e.clientY;
    const mouseX = e.clientX;

    cursorCircle.style.transform = ` Traduceți ( ${mouseX} px, ${mouseY} px ) ` ;
    cursorPoint.style.transform = ` Traduceți ( ${mouseX} px, ${mouseY} px ) ` ;
    }
    window.addEventListener ( 'mousemouse' , moveCursor )
    scenariu >


    Descrierea codului JavaScript de mai sus este dată mai jos:

      • „ , care este folosită pentru a scrie codul JavaScript.
      • „ const ” cuvântul cheie identifică faptul că cuvântul cheie const urmat de o variabilă nu poate fi reatribuit.
      • „ document.querySelector(‘.cercle’) ” returnează elementul div cerc care se potrivește cu selectorul specificat în document.
      • „ document.querySelector(‘.point’) ” returnează elementul div punct care se potrivește cu selectorul specificat în document.
      • „ const moveCursor = (e) => ” această funcție specifică funcția cursorului.
      • „ e.clientY ” returnează coordonatele verticale atunci când evenimentul mouse-ului a fost declanșat.
      • „ e.clientX ” returnează coordonatele orizontale atunci când evenimentul mouse-ului este declanșat.
      • „ cursorCircle.style.transform ” cercul div este aplicat cu transformarea stilului.
      • „ cursorPoint.style.transform ” div-ul punctului este aplicat cu transformarea stilului.
      • „ traduce(${mouseX}px, ${mouseY}px) ” valoarea proprietății transform setează coordonatele orizontale și verticale.
      • „ window.addEventListener(‘mouse’, moveCursor) ” metoda de ascultare a evenimentelor va asculta mișcarea mouse-ului. Face parte din obiectul fereastră globală.

    După furnizarea blocurilor de cod de mai sus, cursorul se va muta automat pe ecran, după cum se arată mai jos:


    Asta e tare! Am creat un cursor personalizat cu diferite proprietăți CSS.

    Concluzie

    CSS „ cursor ” proprietatea are numeroase valori care indică diferite stiluri de cursor. Cu toate acestea, utilizând elementele HTML și proprietățile CSS, putem realiza cursoare personalizate. Apoi, codul JavaScript este implementat pentru a-și activa funcționalitatea. Acest studiu a demonstrat cum să creați cursoare CSS personalizate cu un exemplu practic.

    Alte

    Categorie

    Posturi Populare

    Cum să subliniezi un text în LaTeX

    Paginare DynamoDB: prezentare generală, cazuri de utilizare și exemple

    Cum să dezactivezi chitanțele de citire în Android?

    Eroare Docker „Permisiune refuzată”.

    PySpark Citiți JSON()

    Cum să vă schimbați sau să resetați codul PIN în Windows 11?

    Cum se utilizează comanda /blend în Midjourney?

    Window confirm() Metoda în JavaScript

    Cum se creează un fișier de serviciu în Linux

    Cum să remediați „Eroarea de rulare Visual C++” în timpul lansării jocului

    Continuați în C++

    Cum să regăsiți ID-ul unei ancore în interiorul unui element de listă în JavaScript

    Cum să utilizați comanda „describe-regions” în AWS CLI?

    Nether Portal: Tot ce trebuie să știi

    6 remedieri: nu se poate seta Chrome ca browser implicit Windows 10

    Cum să adăugați Bot în Discord fără a utiliza instrumentul terță parte

    Cum să preveniți instalarea extensiilor în Microsoft Edge - Winhelponline

    Pandas Series Reset Index

    Cum să obțineți lungimea tamponului în Node.js?

    Cum să aliniați textul pe verticală în CSS