Cómo cambiar el cursor a imagen en el flotador usando CSS
En CSS, se utilizan varios tipos de cursores para diferentes elementos HTML, y para cambiar el tipo de cursor, el "cursorSe 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 establecer su propia imagen del cursor.
En esta guía, aprenderá:
- ¿Qué es la propiedad CSS CSS?
- Cómo cambiar el cursor a imagen en el flotador usando CSS
Entonces, comencemos!
¿Qué es la propiedad CSS "cursor"??
Para controlar la apariencia del mouse sobre un elemento HTML, el "cursorSe puede utilizar la propiedad de CSS. Permite cambiar el cursor regular en diferentes tipos, como el cursor de copia, el puntero de mano, el agarre y muchos más. También puede establecer su propio cursor personalizado estableciendo 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 dada anteriormente, asigne la ruta de la imagen en el "url ()"Que quieres mostrar en la pantalla.
Ahora pasaremos al ejemplo para cambiar el cursor regular en una imagen en el flotador.
Cómo cambiar el cursor a imagen en el flotador usando CSS?
Para cambiar el cursor a una imagen en Hover, primero, agregue un elemento en HTML.
Ejemplo 1: Cambiar el cursor a una imagen en el flotador utilizando la propiedad del cursor
Crearemos un encabezado
y nombre de clase de botón "btn".
Html
Cambiar el cursor a la imagen en el flotador
Actualmente, flotar en el botón 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 "yoestafa.SVG"Como nuestra imagen seleccionada. Luego, establezca el valor de la propiedad del cursor como "auto".
CSS
.btn
cursor: url (icono.svg), auto;
relleno: 10px;
Guarde el código anterior y ejecute el archivo HTML para ver el siguiente resultado:
La salida dada indica que el cursor se cambia correctamente a una imagen en el flotador.
Nota: "auto"Se usa 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 en Hover
Por ejemplo, daremos la URL de la imagen y solo estableceremos el valor de la propiedad del cursor como "auto":
cursor: url (), auto;
Como resultado, el cursor no cambiará cuando se desplace sobre el botón:
Ejemplo 3: Configuración de la alternativa de imagen en Hover
En lugar de Auto, puede establecer diferentes valores del cursor que desea mostrar como alternativa a la imagen. Por ejemplo, cambiaremos el valor de la propiedad del cursor desde "auto" a "puntero":
cursor: url (), puntero;
Como puede ver en la siguiente salida, el cursor se cambia a un puntero de mano cuando se cierne sobre el botón:
Hemos proporcionado el método más fácil para cambiar la imagen del cursor en Hover usando CSS.
Conclusión
En CSS, puede cambiar el cursor a la imagen en Hover usando el "cursor" propiedad. Permite cambiar un cursor regular 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 ha roto en un elemento. Este artículo demostró el método de cambiar el cursor a un puntero de mano.