I cursori sono il punto focale di tutto ciò che facciamo su computer e senza di loro, navigare siti web sarebbe molto più difficile. Ogni volta che si fa clic su un collegamento ipertestuale che si vede il cursore della mano, e mentre la pagina successiva si carica, si vede il cursore uovo-timer. Questi sono i cursori di default che tutti i browser usare, ma se volete che il vostro sito web per distinguersi e rompere le convenzioni regolari del cursore, è possibile utilizzare i CSS per specificare un cursore standard diverso per i diversi elementi sulla pagina, o progettare il proprio.

valori standard

Il modo più semplice ed efficace per personalizzare un cursore usando i CSS sta realizzando uno dei più scelta disponibile di serie in quanto l'introduzione di CSS2. Molti di questi sono già utilizzati per impostazione predefinita in pagine Web, ma solo per particolari funzioni predefinite. Il cursore mano visualizzato quando si libra sopra i collegamenti ipertestuali e la freccia di ridimensionamento che appare quando si passa sopra l'angolo di una finestra sono esempi dei cursori disponibili di default tramite CSS.

Immagine personalizzata

Per personalizzare completamente un cursore utilizzando i CSS, è possibile specificare un link ad una particolare immagine che apparirà come il cursore quando si passa sopra l'elemento che lo utilizza. L'immagine deve più essere larga maggiore di 32 pixel e alto 32 pixel, e deve avere uno sfondo trasparente se non riempie l'intera area di pixel 32-by-32. L'immagine deve essere salvata nel formato CUR a lavorare in tutti i browser, altrimenti il ​​browser ricadrà al cursore predefinito.

Attuazione del CSS

Posizionare il "cursore:" proprietà nell'elenco di proprietà dell'elemento, ID o classe desiderata, seguito da un valore. Specifica di un cursore di stile mirino sul tuo div intestazione apparirebbe come:

.header {cursore: mirino;}

Per specificare la propria immagine come il cursore di un particolare elemento, è necessario utilizzare il valore "url". E 'importante specificare un cursore di ripiego nel caso in cui l'immagine non funziona nel browser di un utente. Specificando un cursore un'immagine personalizzata sul tuo div intestazione con uno stile mirino fallback apparirebbe come:

.header {cursore: url ( 'my_cursor.cur'), ​​mirino;)

Compatibilità Browser

Come per molte proprietà CSS, ci sono alcuni problemi di compatibilità cross-browser da tenere a mente. Nessuna versione del supporto del browser Opera immagini personalizzate utilizzando il valore "URL" a partire dalla data di pubblicazione. E 'disponibile solo in Safari 4 e Chrome 4 o versione successiva, Internet Explorer 6 o superiore e Firefox 3 o versione successiva. Tutte le versioni di Firefox richiedono uno stile cursore fallback se il vostro stile primario è un'immagine personalizzata. In altri browser, è consigliabile, ma non obbligatorio.

Eredità

A differenza di alcuni immobili a CSS, la proprietà del cursore non eredita il valore del suo elemento genitore, quindi un div non utilizzare lo stesso tipo di cursore come involucro contenuto della pagina. Il valore del cursore di default è sempre "auto", quindi se un cursore non viene specificato, verrà applicato il cursore standard del browser. Se si desidera applicare lo stesso cursore in tutta la pagina, specificare il valore nell'elemento "corpo", e specificare "del cursore: Eredita;" in ogni div.