Cum se schimbă indicatorul mouse-ului în CSS

Cum se schimbă indicatorul mouse-ului în CSS

Este posibil ca modificările cursorului să nu fie cea mai populară proprietate din lume, dar este totuși un instrument util pentru dezvoltatori. În timp ce browserele vor schimba automat cursorii pentru anumite obiecte, cum ar fi linkurile și unele elemente care pot fi glisate, dezvoltatorii pot obține rezultate mai bune prin specificarea cursorului dorit în mod specific.

Schimbați punctul mouse-ului în CSS

Aspectul cursorului este controlat de proprietatea cursorului CSS. Această proprietate controlează tipul de cursor redat atunci când utilizatorul trece peste obiect. De exemplu, trecerea cu mouse-ul peste obiectul asociat clasei de mai jos ar produce o săgeată de glisare în patru direcții:

Când treceți cu mouse-ul peste obiect, utilizatorul ar vedea un cursor ca cel de mai jos.

Opțiuni standard ale cursorului în CSS

Există o mare varietate de opțiuni ale cursorului pe care le puteți seta pentru utilizarea cursorului. Rețineți că „N”, „S”, „W” și „E” pe care le vedeți în listă se referă la direcțiile cardinale de nord, sud, est și vest. De exemplu, cursor: e-resize; arată un mâner de redimensionare cu o săgeată pe partea „estică” sau pe partea dreaptă.

Chris Coyier, vrăjitorul din spate CSS-Tricks.com, creată acest doodle pentru a ajuta la afișarea diferitelor opțiuni ale cursorului în CSS.

Utilizarea imaginilor ca cursori

La fel ca multe proprietăți CSS, proprietatea cursorului poate lua atribute și prin specificații URL. De exemplu, clasa de mai jos ar folosi imaginea asociată pentru cursor.

Automatul specifică ulterior un cursor de rezervă. Atributul auto va afișa orice cursor ar folosi de obicei browserul pentru obiectul curent de sub cursor. De asemenea, puteți specifica imagini suplimentare cu o listă separată prin virgulă sau puteți specifica oricare dintre cursoare care să funcționeze ca cursor alternativ.

Animațiile de orice fel, fie în GIF, SVG sau PNG, nu sunt acceptate de browsere. Dar PNG-urile transparente funcționează astăzi în toate browserele web populare de pe piață. SVG-urile nu sunt la fel de fiabile în Firefox, dar funcționează bine în alte browsere.

În mod implicit, „punctul fierbinte” al cursorului va fi setat în colțul din stânga sus al imaginii. Pentru a indica un „punct fierbinte” diferit, specificați o pereche de coordonate (X, Y) în apelul cursorului. Acest exemplu de mai jos va seta punctul fierbinte ca (3,3), folosind stânga sus ca (0,0).

Concluzie: utilizarea acestor atribute

Dacă dezvoltați un site web, puteți adăuga aceste proprietăți CSS la orice obiect de pe site-ul dvs. pentru a schimba cursorul pe care îl vede utilizatorul atunci când treceți cu mouse-ul peste obiect. Dacă sunteți mai aventuros, puteți utiliza și o extensie de browser ca Stylus, TamperMonkey, sau Maimuță unsuroasă pentru a executa CSS arbitrar deasupra unui site web. În acest fel, puteți afișa propriul cursor personalizat oricând și oriunde doriți.

Scroll to Top