Ce este Cursorele în CSS?
În fiecare zi, folosim deja cursore personalizate. Această interacțiune este posibilă prin utilizarea cursoarelor modificate, cum ar fi atunci când treceți cu mouse-ul peste butoane, cursorul indicatorului se transformă într-o mână sau când treceți cu mouse-ul peste text și cursorul se transformă într-un cursor text.
Cu toate acestea, cursorurile pot fi folosite și pentru a oferi utilizatorilor noștri diverse oportunități creative suplimentare.
Ar trebui să fim conștienți de faptul că CSS are deja cursore implicite pentru diferite acțiuni des făcute înainte de a începe să dezvoltăm cursoarele noastre personalizate.
Aceste cursoare oferă opțiuni de acțiune în locul exact pe care treci cu mouse-ul. Exemplele includ cursore care indică că ar trebui să faceți clic pe linkuri, să trageți și să plasați elemente, să măriți și să micșorați obiectele și multe altele.
java replaceall
Utilizați proprietatea cursorului CSS pentru a descrie tipul de cursor dorit.
Proprietatea cursorului CSS
Putem specifica tipul de cursor care ar trebui să fie afișat utilizatorului folosind proprietatea cursorului CSS.
Utilizarea fotografiilor ca butoane de trimitere pe formulare este o aplicație utilă a acestei capacități. În mod implicit, o mână apare în locul unui indicator când un cursor se află deasupra unei legături. Cu toate acestea, butonul de trimitere al unui formular nu determină schimbarea formularului. Acesta servește ca un indiciu vizual că imaginea poate fi făcută clic oricând cineva trece cu mouse-ul peste o imagine care este un buton de trimitere.
Această proprietate este specificată de zero sau mai multe valori separate prin virgule, urmate de o valoare a cuvântului cheie, după cum este necesar, și fiecare se va referi la fișierul imagine.
Sintaxă
cursor: value;
Valorile proprietăților
| Auto: | Setarea implicită pentru acest atribut este plasarea cursorului.
| Alias: | Acest atribut este folosit pentru a afișa indicatorul legat de crearea cursorului.
| All-scroll: | Cursorul din acest atribut indică derularea.
| Celula: | Cursorul din această proprietate indică faptul că o celulă sau un grup de celule este în prezent aleasă.
| Meniul contextual: | Cursorul din acest atribut arată prezența unui meniu contextual.
| Redimensionare col: | Când cursorul se află deasupra unei coloane din această proprietate, acesta poate fi redimensionat pe orizontală.
| Copie: | Cursorul din această proprietate indică faptul că ceva trebuie copiat.
| Crosshair: | Cursorul apare ca o cruce în acest atribut.
| Mod implicit: | Cursorul implicit.
| E-redimensionare: | Cursorul din acest atribut indică faptul că marginea din dreapta a unei casete trebuie mutată.
| Redimensionează: | Cursorul din acest atribut reprezintă un cursor de redimensionare bidirecțional.
| Ajutor: | În această proprietate, cursorul arată că asistența este accesibilă.
| Mișcare: | Indicatorul din această proprietate implică faptul că ceva trebuie mutat
| . n-redimensionare: | Când utilizați proprietatea n-resize, indicatorul arată că limita superioară a unei casete ar trebui să fie deplasată.
| Ce redimensionare: | Cu această proprietate, cursorul arată că marginea unei casete ar trebui să fie deplasată la dreapta și în sus.
| Nou-redimensionare: | Cursorul de redimensionare bidirecțional este indicat de acest atribut.
| Ns-redimensionare: | Un cursor de redimensionare bidirecțional este indicat de atributul ns-resize.
| Nw-redimensionare: | Cursorul din acest atribut arată că marginile superioare și inferioare ale unei casete trebuie mutate în sus și la stânga.
| Redimensionarea nasului: | Cursorul de redimensionare bidirecțional este indicat de acest atribut.
| Fără picătură: | Cursorul din acest atribut indică faptul că obiectul tras nu poate fi aruncat în această locație.
| Nici unul: | Un cursor nu este afișat pentru element conform acestui atribut.
| Nepermis: | Cursorul din această proprietate indică faptul că acțiunea solicitată nu va fi efectuată.
| Indicator: | Cursorul din această proprietate servește ca indicator și afișează progresul legăturii.
| Progres: | Cursorul din acest atribut arată că programul este activ.
| Redimensionare rând: | Cursorul arată că această caracteristică permite redimensionarea rândurilor verticale.
| S-redimensionare: | Când utilizați această proprietate, indicatorul arată că limita inferioară a unei casete trebuie coborâtă.
| Se redimensionează: | Cursorul din acest atribut indică faptul că marginea unei casete ar trebui să fie deplasată la dreapta și în jos.
| Sw-redimensionare: | Cursorul din acest atribut indică faptul că marginile din stânga și de jos ale unei casete trebuie mutate.
| Text: | Cursorul din acest atribut indică text care poate fi ales.
| URL: | Această proprietate conține o listă de adrese URL personalizate de cursor separate prin virgule și un cursor generic la sfârșitul listei.
| Text vertical: | Cursorul din acest atribut arată posibile selecții de text vertical.
| Redimensionare W: | Când utilizați această proprietate, indicatorul arată că marginea stângă a unei casete trebuie mutată.
Exemplu
Acest exemplu arată cum să utilizați proprietatea cursorului. Programul este ocupat deoarece valoarea proprietății cursorului este setată să aștepte.
CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> Ieșire
Putem specifica tipul de cursor care ar trebui să fie afișat utilizatorului folosind proprietatea cursorului CSS. Utilizarea fotografiilor ca butoane de trimitere pe formulare este o aplicație utilă a acestei capacități. În mod implicit, o mână apare în locul unui indicator când un cursor se află deasupra unei legături.
