In CSS, vari tipi di cursori vengono utilizzati per diversi elementi HTML e per cambiare il tipo di cursore, il “cursore"La proprietà viene utilizzata. Ti consente di modificare il tipo di cursore e impostare il valore del cursore che si desidera visualizzare sullo schermo. Come ulteriore funzionalità, ti consente anche di impostare la tua immagine del cursore.

In questa guida, imparerai:

• Cos'è la proprietà CSS del cursore
• Come cambiare il cursore in immagine su Hover usando CSS

Quindi iniziamo!

Qual è la proprietà CSS "cursore"?

Per controllare l'aspetto del mouse su un elemento HTML, "cursore"È possibile utilizzare proprietà di CSS. Consente di cambiare il cursore normale in diversi tipi come il cursore di copia, il puntatore del manuale, afferrare e molti altri. Puoi anche impostare il tuo cursore personalizzato impostando l'URL dell'immagine nella proprietà del cursore.

Sintassi

La sintassi della proprietà del cursore è data come:

Cursore: url ();

Nella sintassi sopra data, assegnare il percorso dell'immagine in "url ()"Che vuoi visualizzare sullo schermo.

Passeremo ora all'esempio per cambiare il cursore normale in un'immagine su Hover.

Come cambiare il cursore in immagine su Hover usando CSS?

Per cambiare il cursore in un'immagine su Hover, prima, aggiungi un elemento in HTML.

Esempio 1: cambiare il cursore in un'immagine su Hover usando la proprietà del cursore

Creeremo una voce

e nome classe pulsante "btn".

Html

Cambia il cursore in immagine su Hover

Cliccami

Attualmente, il pulsante in bilico mostrerà il cursore predefinito:

Ora spostati sul CSS e cambia il cursore sull'immagine.

Quindi, imposta il percorso dell'immagine in "url ()". Ad esempio, abbiamo specificato "icon.Svg"Come la nostra immagine selezionata. Quindi, imposta il valore della proprietà del cursore come "auto".

CSS

.btn
Cursore: URL (icona.svg), auto;
imbottitura: 10px;

Salva il codice sopra ed esegui il file HTML per visualizzare il seguente risultato:

L'output dato indica che il cursore viene cambiato correttamente in un'immagine su.

Nota: "auto"È usato come opzione alternativa nella proprietà del cursore; Quando l'immagine non si carica o manca il percorso del file o il file stesso, l'icona predefinita viene visualizzata sullo schermo a causa del valore automatico.

Esempio 2: Impostazione del cursore predefinito su Hover

Ad esempio, daremo l'URL dell'immagine e imposteremo solo il valore della proprietà del cursore come "auto":

Cursore: url (), auto;

Di conseguenza, il cursore non cambierà quando è stato litigato sul pulsante:

Esempio 3: Impostazione dell'immagine alternativa su Hover

Nel luogo dell'auto, è possibile impostare valori diversi del cursore che si desidera visualizzare come alternativa all'immagine. Ad esempio, cambieremo il valore della proprietà del cursore da "auto" A "Pointer":

Cursore: url (), puntatore;

Come puoi vedere nell'uscita seguente, il cursore viene cambiato in un puntatore della mano quando si libra sul pulsante:

Abbiamo fornito il metodo più semplice per modificare l'immagine del cursore su Hover usando CSS.

Conclusione

In CSS, puoi cambiare il cursore nell'immagine su Hover usando il "cursore" proprietà. Consente di cambiare un cursore normale in un'immagine assegnando il "URL"Dell'immagine alla proprietà del cursore. È possibile applicare qualsiasi tipo di cursore che si desidera visualizzare quando è sospeso su un elemento. Questo articolo ha dimostrato il metodo per cambiare il cursore in un puntatore della mano.