Sintassi

Significato dei valori principali:

• default: il cursore standard del sistema.

• pointer: cursore a forma di mano, comunemente usato per link cliccabili.

• text: cursore a forma di I (barra verticale), usato nei campi di testo.

• move: cursore con frecce in tutte le direzioni, per elementi trascinabili.

• not-allowed: cursore con simbolo di divieto.

• wait: cursore a clessidra o simbolo di caricamento.

• help: cursore con punto interrogativo, indica un aiuto disponibile.

• url('immagine.png'), fallback: consente di specificare un'immagine personalizzata per il cursore, con un cursore di riserva nel caso non sia caricata.

Esempio proprietà: cursor

Codice Esempio: cursor

CODE: CSS

1. .cursor-default {

2.   cursor: default;

3. }

5. .cursor-pointer {

6.   cursor: pointer;

7. }

9. .cursor-text {

10.   cursor: text;

11. }

13. .cursor-help {

14.   cursor: help;

15. }

17. .cursor-not-allowed {

18.   cursor: not-allowed;

19. }

21. .cursor-demo button {

22.   margin: 10px;

23.   padding: 10px 20px;

24.   font-size: 16px;

25. }

Contenuto Esempio: cursor

  
  <style>
    .cursor-default {
      cursor: default;
    }

    .cursor-pointer {
      cursor: pointer;
    }

    .cursor-text {
      cursor: text;
    }

    .cursor-help {
      cursor: help;
    }

    .cursor-not-allowed {
      cursor: not-allowed;
    }

    .cursor-demo button {
      margin: 10px;
      padding: 10px 20px;
      font-size: 16px;
    }
  </style>

  <div class="cursor-demo">
    <button class="cursor-default">Default</button>
    <button class="cursor-pointer">Pointer</button>
    <button class="cursor-text">Text</button>
    <button class="cursor-help">Help</button>
    <button class="cursor-not-allowed">Not Allowed</button>
  </div>
  

Un esempio completo di utilizzo della proprietà CSS cursor con un'immagine personalizzata (url('immagine.png')) e un valore di fallback nel caso in cui l'immagine non venga caricata correttamente o non sia supportata:

CODE: CSS

1. .elemento {

2.   cursor: url('immagine.png'), pointer;

3. }

Spiegazione:

• url('immagine.png'): usa un'immagine personalizzata come cursore.
• pointer: è il fallback. Viene usato se l'immagine non può essere caricata. In questo caso, il cursore sarà una mano, tipica dei link.

Requisiti dell'immagine:

• L’immagine deve essere piccola, idealmente 32×32 pixel o meno.
• Il formato consigliato è .png o .cur.
• Può anche specificare il punto attivo (hotspot), ad esempio:

In questo caso, 4 4 indica la posizione (x, y) all’interno dell’immagine da usare come punto attivo.

CODE: CSS

1. cursor: url('immagine.png') 4 4, pointer;

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser