În CSS, diferite tipuri de cursore sunt utilizate pentru diferite elemente HTML și pentru a schimba tipul de cursor, „ cursor ” este folosită proprietatea. Vă permite să schimbați tipul de cursor și să setați valoarea cursorului pe care doriți să-l afișați pe ecran. Ca o caracteristică suplimentară, vă permite, de asemenea, să setați propria imagine a cursorului.

În acest ghid, veți învăța:

• Ce este proprietatea CSS a cursorului
• Cum să schimbați cursorul în imagine pe Hover folosind CSS

Asadar, hai sa incepem!

Ce este proprietatea CSS „cursor”?

Pentru a controla aspectul mouse-ului peste un element HTML, „ cursor ” proprietatea CSS poate fi folosită. Permite schimbarea cursorului obișnuit în diferite tipuri, cum ar fi cursorul de copiere, indicatorul de mână, prinderea și multe altele. De asemenea, puteți seta propriul cursor personalizat setând adresa URL a imaginii în proprietatea cursorului.

Sintaxă

Sintaxa proprietății cursorului este dată astfel:

În sintaxa de mai sus, atribuiți calea imaginii în „ url() ” pe care doriți să le afișați pe ecran.

Vom trece acum la exemplul pentru a schimba cursorul obișnuit într-o imagine la hover.

Cum se schimbă cursorul în imagine pe Hover folosind CSS?

Pentru a schimba cursorul într-o imagine la trecerea cursorului, mai întâi, adăugați un element în HTML.

Exemplul 1: Schimbarea cursorului într-o imagine pe Hover folosind proprietatea cursorului

Vom crea un titlu

și numele clasei butonului „ btn ”.

HTML

< corp >
< h1 > Schimbați cursorul în imagine la trecerea cursorului h1 >
< buton clasă = 'btn' > Faceți clic pe Mine buton >
corp >

În prezent, trecerea cursorului pe buton va afișa cursorul implicit:

Acum treceți la CSS și schimbați cursorul la imagine.

Apoi, setați calea imaginii în „ url() ”. De exemplu, am specificat „i cu.svg ” ca imaginea noastră selectată. Apoi, setați valoarea proprietății cursorului ca „ auto ”.

CSS

.btn {
cursor: url ( icon.svg ) , auto;
umplutură: 10px;
}

Salvați codul de mai sus și executați fișierul HTML pentru a vedea următorul rezultat:

Ieșirea dată indică faptul că cursorul a fost schimbat cu succes într-o imagine la hover.

Notă: „ auto ” este folosit ca o opțiune alternativă în proprietatea cursorului; când imaginea nu se încarcă sau calea fișierului sau fișierul în sine lipsește, pictograma implicită este afișată pe ecran din cauza valorii automate.

Exemplul 2: Setarea cursorului implicit la Hover

De exemplu, vom da adresa URL a imaginii și vom seta doar valoarea proprietății cursorului ca „ auto ”:

cursor: url ( ) , auto;

Drept urmare, cursorul nu se va schimba când treceți cursorul peste buton:

Exemplul 3: Setarea alternativei imaginii la trecerea cursorului

În locul auto, puteți seta diferite valori ale cursorului pe care doriți să-l afișați ca alternativă la imagine. De exemplu, vom schimba valoarea proprietății cursorului din „ auto ' la ' indicator ”:

cursor: url ( ) , indicator;

După cum puteți vedea în rezultatul de mai jos, cursorul este schimbat într-un indicator de mână când trece cu mouse-ul peste buton:

Am oferit cea mai ușoară metodă de schimbare a imaginii cursorului la trecerea cu mouse-ul folosind CSS.

Concluzie

În CSS, puteți schimba cursorul la imaginea de pe hover folosind butonul „ cursor ” proprietate. Permite schimbarea unui cursor obișnuit la o imagine prin atribuirea „ url ” din imagine la proprietatea cursorului. Puteți aplica orice tip de cursor pe care doriți să îl afișați atunci când acesta a trecut cu mouse-ul pe un element. Acest articol a demonstrat metoda de schimbare a cursorului într-un indicator de mână.