En CSS, s'utilitzen diversos tipus de cursors per a diferents elements HTML, i per canviar el tipus de cursor, el ' cursor s'utilitza propietat. Us permet canviar el tipus de cursor i establir el valor del cursor que voleu mostrar a la pantalla. Com a característica addicional, també us permet configurar la vostra pròpia imatge del cursor.
En aquesta guia, aprendràs:
- Què és la propietat CSS del cursor
- Com canviar el cursor a la imatge al passar el cursor mitjançant CSS
Així doncs, comencem!
Què és la propietat CSS 'cursor'?
Per controlar l'aparença del ratolí sobre un element HTML, el ' cursor ” es pot utilitzar la propietat de CSS. Permet canviar el cursor normal en diferents tipus, com ara cursor de còpia, punter manual, agafar i molts més. També podeu configurar el vostre propi cursor personalitzat configurant l'URL de la imatge a la propietat del cursor.
Sintaxi
La sintaxi de la propietat del cursor es dóna com:
cursor: url ( ) ;A la sintaxi indicada anteriorment, assigneu el camí de la imatge a la secció “ url() ” que voleu mostrar a la pantalla.
Ara passarem a l'exemple per canviar el cursor normal en una imatge al passar el cursor.
Com canviar el cursor a la imatge al passar el cursor amb CSS?
Per canviar el cursor a una imatge al passar el cursor, primer, afegiu un element en HTML.
Exemple 1: Canviar el cursor a una imatge al passar el cursor mitjançant la propietat del cursor
Crearem un encapçalament
i un nom de classe de botó ' btn ”.
HTML
< cos >< h1 > Canvia el cursor a la imatge al passar el cursor h1 >
< botó classe = 'btn' > Feu clic a mi botó >
cos >
Actualment, en passar el cursor sobre el botó es mostrarà el cursor predeterminat:
Ara aneu al CSS i canvieu el cursor a la imatge.
A continuació, configureu el camí de la imatge a la secció “ url() ”. Per exemple, hem especificat “i con.svg ” com la nostra imatge seleccionada. A continuació, establiu el valor de la propietat del cursor com a ' automàtic ”.
CSS
.btn {cursor: url ( icon.svg ) , automàtic;
farciment: 10px;
}
Deseu el codi anterior i executeu el fitxer HTML per veure el resultat següent:
La sortida proporcionada indica que el cursor s'ha canviat correctament en una imatge al passar el cursor.
Nota: “ automàtic ” s'utilitza com a opció alternativa a la propietat del cursor; quan la imatge no es carrega o falta la ruta del fitxer o el mateix fitxer, la icona predeterminada es mostra a la pantalla a causa del valor automàtic.
Exemple 2: Configuració del cursor predeterminat al passar el cursor
Per exemple, donarem l'URL de la imatge i només establirem el valor de la propietat del cursor com a ' automàtic ”:
cursor: url ( ) , automàtic;Com a resultat, el cursor no canviarà quan passeu el cursor per sobre del botó:
Exemple 3: Configuració d'una imatge alternativa al passar el cursor
En lloc d'auto, podeu establir diferents valors del cursor que voleu mostrar com a alternativa a la imatge. Per exemple, canviarem el valor de la propietat del cursor de ' automàtic ' a ' punter ”:
cursor: url ( ) , punter;Com podeu veure a la sortida següent, el cursor es converteix en un punter de mà quan passa el cursor per sobre del botó:
Hem proporcionat el mètode més fàcil per canviar la imatge del cursor en passar el cursor mitjançant CSS.
Conclusió
En CSS, podeu canviar el cursor a la imatge en passar el cursor amb el botó ' cursor ' propietat. Permet canviar un cursor normal a una imatge assignant el ' url ” de la imatge a la propietat del cursor. Podeu aplicar qualsevol tipus de cursor que vulgueu mostrar quan s'hagi passat per sobre d'un element. Aquest article va demostrar el mètode per canviar el cursor a un punter de mà.