Come cambiare il cursore in un puntatore della mano in CSS

Esistono molti tipi di cursori che vengono utilizzati su schermi diversi. È possibile modificare il tipo di cursore utilizzando la proprietà del cursore CSS, che specifica quale tipo di cursore viene visualizzato per l'utente, ad esempio puntatore manuale, prendi, copia, ecc. Possiamo modificare un cursore normale in un puntatore manuale dando il valore "puntatore" alla proprietà del cursore.

In questo articolo, impareremo:

• "cursore" proprietà
• Sintassi della proprietà del cursore
• Come cambiare il cursore in un porta-puntatore in CSS?

Iniziamo!

Proprietà CSS "Cursore"

CSS "cursore"Proprietà controllano l'aspetto del puntatore del mouse quando è sopra un elemento. La proprietà del cursore in CSS ci consente di cambiare un cursore normale in un cursore a mano, copiare il cursore, cursore cellulare, cursore di presa, ecc. Ogni forma del cursore ha scopi diversi. Ad esempio, il cursore di copia indica la copia del testo e il puntatore indica il clic su collegamenti o menu. Ora passiamo alla sintassi della proprietà del cursore.

Sintassi della proprietà del cursore

La sintassi della proprietà del cursore è:

Cursore: valore;

Al posto di 'valore', possiamo assegnare il valore del cursore che vogliamo visualizzare sullo schermo. Ad esempio, puntatore, copia, prendi e molti altri.

Dopo aver compreso la sintassi del cursore, passeremo all'esempio in cui modifichiamo il cursore normale in un puntatore della mano.

Come cambiare il cursore in un puntatore della mano in CSS?

Consideriamo un esempio pratico per illustrare il funzionamento della proprietà del cursore.

Esempio

In questo esempio, creeremo un elenco nel file HTML che contenga tre elementi:

• Html


• CSS


• JavaScript

Attualmente, il nostro cursore sembra questo:

Successivamente, ci sposteremo sul file CSS e imposteremo il valore del cursore su "Pointer"Per cambiare il tipo di cursore in puntatore a mano. Inoltre, imposteremo il margine dell'elenco come "25px"E il margine-sinistra come"500px"Questo perché creerà spazio tra gli elementi dell'elenco e anche dal lato sinistro dell'elenco:

li
Cursore: puntatore;
Margine: 25px;
margine-sinistra: 500px;

Abbiamo impostato il valore del cursore su "Pointer“, Che cambierà in un puntatore manuale quando l'utente si libra su un elemento dell'elenco.

Dopo l'implementazione del codice CSS, vai su HTML e vedi il risultato:

Qui, possiamo vedere che ogni volta che il cursore si sposta sull'elemento dell'elenco, cambia in un puntatore della mano. Questo è dovuto al "cursore" proprietà

Conclusione

La proprietà del cursore in CSS consente di cambiare un cursore normale su un puntatore della mano. Per modificare il cursore normale su un puntatore della mano, è necessario assegnare "Pointer"Valore alla proprietà del cursore. Puoi applicare qualsiasi tipo di cursore che desideri visualizzare sullo schermo. Questo articolo dimostra il metodo per cambiare il cursore in un puntatore della mano.