En CSS, se utilizan varios tipos de cursores para diferentes elementos HTML, y para cambiar el tipo de cursor, el ' cursor Se utiliza la propiedad ”. Le permite cambiar el tipo de cursor y establecer el valor del cursor que desea mostrar en la pantalla. Como característica adicional, también le permite configurar su propia imagen de cursor.
En esta guía, aprenderá:
- ¿Qué es la propiedad CSS del cursor?
- Cómo cambiar el cursor a la imagen en Hover usando CSS
Entonces, ¡comencemos!
¿Qué es la propiedad CSS del 'cursor'?
Para controlar la apariencia del mouse sobre un elemento HTML, el botón “ cursor Se puede utilizar la propiedad ” de CSS. Permite cambiar el cursor normal a diferentes tipos, como cursor de copia, puntero de mano, agarre y muchos más. También puede configurar su propio cursor personalizado configurando la URL de la imagen en la propiedad del cursor.
Sintaxis
La sintaxis de la propiedad del cursor se da como:
cursor: URL ( ) ;En la sintaxis anterior, asigne la ruta de la imagen en el ' URL() ” que desea mostrar en la pantalla.
Ahora pasaremos al ejemplo para cambiar el cursor normal a una imagen al pasar el mouse.
¿Cómo cambiar el cursor a la imagen al pasar el mouse usando CSS?
Para cambiar el cursor a una imagen al pasar el mouse, primero, agregue un elemento en HTML.
Ejemplo 1: cambiar el cursor a una imagen al pasar el mouse usando la propiedad del cursor
Crearemos un encabezado
y un nombre de clase de botón ' btn ”.
HTML
< cuerpo >< h1 > Cambiar el cursor a la imagen al pasar el mouse h1 >
< botón clase = 'btn' > Haz click en mi botón >
cuerpo >
Actualmente, al pasar el cursor sobre el botón se mostrará el cursor predeterminado:
Ahora muévase al CSS y cambie el cursor a la imagen.
Luego, establezca la ruta de la imagen en el ' URL() ”. Por ejemplo, hemos especificado “i con.svg ” como nuestra imagen seleccionada. Luego, establezca el valor de la propiedad del cursor como ' auto ”.
CSS
.btn {cursor: URL ( icono.svg ) , automático;
relleno: 10px;
}
Guarde el código anterior y ejecute el archivo HTML para ver el siguiente resultado:
El resultado dado indica que el cursor se transformó con éxito en una imagen al pasar el mouse.
Nota: “ auto ” se utiliza como una opción alternativa en la propiedad del cursor; cuando la imagen no se carga, o falta la ruta del archivo o el archivo en sí, el icono predeterminado se muestra en la pantalla debido al valor automático.
Ejemplo 2: configuración del cursor predeterminado al pasar el mouse
Por ejemplo, daremos la URL de la imagen y solo estableceremos el valor de la propiedad del cursor como ' auto ”:
cursor: URL ( ) , automático;Como resultado, el cursor no cambiará cuando se desplace sobre el botón:
Ejemplo 3: Configuración de la alternativa de imagen al pasar el mouse
En lugar de automático, puede establecer diferentes valores del cursor que desea mostrar como alternativa a la imagen. Por ejemplo, cambiaremos el valor de la propiedad del cursor de “ auto ' a ' puntero ”:
cursor: URL ( ) , puntero;Como puede ver en el siguiente resultado, el cursor se convierte en un puntero de mano cuando se desplaza sobre el botón:
Hemos proporcionado el método más fácil para cambiar la imagen del cursor al pasar el mouse usando CSS.
Conclusión
En CSS, puede cambiar el cursor a la imagen al pasar el mouse usando el ' cursor ' propiedad. Permite cambiar un cursor normal a una imagen asignando el “ URL ” de la imagen a la propiedad del cursor. Puede aplicar cualquier tipo de cursor que desee mostrar cuando se haya desplazado sobre un elemento. Este artículo demostró el método de cambiar el cursor a un puntero de mano.