In CSS, vari tipi di cursori vengono utilizzati per diversi elementi HTML e per cambiare il tipo di cursore, il ' cursore viene utilizzata la proprietà. Consente di modificare il tipo di cursore e di impostare il valore del cursore che si desidera visualizzare sullo schermo. Come funzionalità aggiuntiva, 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!
Che cos'è la proprietà CSS 'cursore'?
Per controllare l'aspetto del mouse su un elemento HTML, ' cursore ” è possibile utilizzare la proprietà CSS. Consente di modificare il cursore normale in diversi tipi come il cursore di copia, il puntatore della mano, la presa e molti altri. Puoi anche impostare il tuo cursore personalizzato impostando l'URL dell'immagine nella proprietà del cursore.
Sintassi
La sintassi della proprietà cursor è data come:
cursore: url ( ) ;Nella sintassi sopra indicata, assegna il percorso dell'immagine nel ' URL() ” che si desidera visualizzare sullo schermo.
Passiamo ora all'esempio per cambiare il cursore normale in un'immagine al passaggio del mouse.
Come cambiare il cursore in immagine al passaggio del mouse utilizzando CSS?
Per cambiare il cursore in un'immagine al passaggio del mouse, prima aggiungi un elemento in HTML.
Esempio 1: modifica del cursore in un'immagine al passaggio del mouse utilizzando la proprietà del cursore
Creeremo un'intestazione
e il nome della classe del pulsante ' btn ”.
HTML
< corpo >< h1 > Cambia il cursore in Immagine al passaggio del mouse h1 >
< pulsante classe = 'btn' > Cliccami pulsante >
corpo >
Attualmente, passando il mouse sul pulsante verrà visualizzato il cursore predefinito:
Ora passa al CSS e cambia il cursore sull'immagine.
Quindi, imposta il percorso dell'immagine in ' URL() ”. Ad esempio, abbiamo specificato “i con.svg ” come la nostra immagine selezionata. Quindi, imposta il valore della proprietà del cursore come ' auto ”.
CSS
.btn {cursore: url ( icon.svg ) , automatico;
imbottitura: 10px;
}
Salva il codice sopra ed esegui il file HTML per vedere il seguente risultato:
L'output fornito indica che il cursore è stato modificato correttamente in un'immagine al passaggio del mouse.
Nota: “ auto ” viene utilizzato come opzione alternativa nella proprietà del cursore; quando l'immagine non viene caricata 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 al passaggio del mouse
Ad esempio, forniremo l'URL dell'immagine e imposteremo solo il valore della proprietà del cursore come ' auto ”:
cursore: url ( ) , automatico;Di conseguenza, il cursore non cambierà quando si passa sopra il pulsante:
Esempio 3: impostazione dell'alternativa all'immagine al passaggio del mouse
Al posto di auto è possibile impostare diversi valori del cursore che si desidera visualizzare in alternativa all'immagine. Ad esempio, cambieremo il valore della proprietà del cursore da ' auto ' a ' puntatore ”:
cursore: url ( ) , puntatore;Come puoi vedere nell'output sottostante, il cursore viene trasformato in un puntatore a mano quando si passa sopra il pulsante:
Abbiamo fornito il metodo più semplice per modificare l'immagine del cursore al passaggio del mouse utilizzando CSS.
Conclusione
In CSS, puoi cambiare il cursore sull'immagine al passaggio del mouse usando il ' cursore ' proprietà. Consente di modificare un cursore normale in un'immagine assegnando il ' url ” dell'immagine alla proprietà del cursore. Puoi applicare qualsiasi tipo di cursore che desideri visualizzare quando si è posizionato su un elemento. Questo articolo ha illustrato il metodo per modificare il cursore in un puntatore a mano.