Come cambiare il puntatore del mouse in CSS

So ändern Sie den Mauszeiger in CSS
⏱️ 3 min read

Le modifiche al cursore potrebbero non essere la proprietà più popolare al mondo, ma è comunque uno strumento utile per gli sviluppatori. Sebbene i browser cambino automaticamente i cursori per determinati oggetti, come i collegamenti e alcuni elementi trascinabili, gli sviluppatori possono ottenere risultati migliori specificando in modo specifico il cursore desiderato.

Cambia il punto del mouse in CSS

L’aspetto del cursore è controllato dal proprietà CSS del cursore. Questa proprietà controlla il tipo di cursore visualizzato quando l’utente posiziona il mouse sull’oggetto. Ad esempio, il passaggio del mouse sull’oggetto associato alla classe seguente produrrebbe una freccia di trascinamento in quattro direzioni:

Quando passa con il mouse sull’oggetto, l’utente vede un cursore come quello sotto.

Opzioni del cursore standard in CSS

C’è un’ampia varietà di opzioni del cursore che puoi impostare per l’utilizzo del cursore. Nota che la “N”, “S”, “O” e “E” che vedi nell’elenco si riferiscono alle direzioni cardinali di nord, sud, est e ovest. Per esempio, cursor: e-resize; mostra un quadratino di ridimensionamento con una freccia sul lato “orientale” o sul lato destro.

Chris Coyier, il mago dietro CSS-Tricks.com, creato questo doodle per aiutare a mostrare le varie opzioni del cursore in CSS.

Utilizzo di immagini come cursori

Come molte proprietà CSS, la proprietà del cursore può anche accettare attributi tramite le specifiche dell’URL. Ad esempio, la classe seguente userebbe l’immagine associata per il cursore.

L’auto in seguito specifica un cursore di fallback. L’attributo auto mostrerà qualunque cursore il browser userebbe normalmente per l’oggetto corrente sotto il cursore. È inoltre possibile specificare immagini aggiuntive con un elenco separato da virgole o specificare uno qualsiasi dei cursori in modo che funzioni come cursore di riserva.

L’animazione di qualsiasi tipo, sia in GIF, SVG o PNG, non è supportata dai browser. Ma i PNG trasparenti funzionano in tutti i browser Web più diffusi oggi sul mercato. Gli SVG non sono affidabili in Firefox, ma funzionano bene in altri browser.

Per impostazione predefinita, il “punto attivo” del cursore sarà impostato nell’angolo superiore sinistro dell’immagine. Per indicare un “punto attivo” diverso, specificare una coppia di coordinate (X, Y) nella chiamata del cursore. Questo esempio sotto imposterà l’hot spot come (3,3), usando l’angolo in alto a sinistra come (0,0).

Conclusione: utilizzo di questi attributi

Se stai sviluppando un sito web, puoi aggiungere queste proprietà CSS a qualsiasi oggetto sul tuo sito per cambiare il cursore che l’utente vede quando posiziona il mouse sull’oggetto. Se sei più avventuroso, puoi anche utilizzare un’estensione del browser come Stilo, TamperMonkey, o GreaseMonkey per eseguire CSS arbitrari su un sito web. In questo modo, puoi mostrare il tuo cursore personalizzato quando e dove vuoi.

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Avatar di Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

Potrebbero interessarti anche...

Subscribe
Notificami
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x