¿Qué son los cursores en CSS?

Todos los días ya utilizamos cursores personalizados. Esta interacción es posible mediante el uso de cursores modificados, como cuando pasa el cursor sobre los botones, el cursor del puntero se transforma en una mano, o cuando pasa el cursor sobre el texto y el cursor se transforma en un cursor de texto.

Sin embargo, los cursores también se pueden utilizar para brindar a nuestros usuarios varias oportunidades creativas adicionales.

Debemos tener en cuenta que CSS ya tiene cursores predeterminados para varias acciones que se realizan con frecuencia antes de comenzar a desarrollar nuestros cursores personalizados.

Estos cursores brindan opciones de acción en el lugar preciso sobre el que se encuentra. Los ejemplos incluyen cursores que indican que debe hacer clic en enlaces, arrastrar y soltar elementos, acercar y alejar objetos y más.

sumador completo

Utilice la propiedad del cursor CSS para describir el tipo de cursor que desea.

Propiedad del cursor CSS

Podemos especificar el tipo de cursor que se debe mostrar al usuario usando la propiedad de cursor CSS.

reaccionar js tutorial

El uso de fotografías como botones de envío en formularios es una aplicación útil de esta capacidad. De forma predeterminada, aparece una mano en lugar de un puntero cuando el cursor está encima de un enlace. Sin embargo, el botón de envío de un formulario no hace que cambie de formato. Esto sirve como una señal visual de que se puede hacer clic en la imagen cada vez que alguien pasa el cursor sobre una imagen que es un botón de envío.

Esta propiedad se especifica mediante cero o más valores separados por comas, seguidos de un valor de palabra clave según sea necesario, y cada uno de ellos hará referencia al archivo de imagen.

Sintaxis

 cursor: value; 

Valores de propiedad

Auto:La configuración predeterminada para este atributo es colocar el cursor.Alias:Este atributo se utiliza para mostrar el indicador relacionado con la creación del cursor.Desplazamiento total:El cursor en este atributo indica desplazamiento.Celúla:El cursor en esta propiedad indica que actualmente se ha elegido una celda o un grupo de celdas.Menú de contexto:El cursor en este atributo muestra la presencia de un menú contextual.Cambiar tamaño de color:Cuando el cursor está encima de una columna en esta propiedad, se puede cambiar su tamaño horizontalmente.Copiar:El cursor en esta propiedad indica que se debe copiar algo.Punto de mira:El cursor aparece como una cruz en este atributo.Por defecto:El cursor predeterminado.Cambio de tamaño electrónico:El cursor en este atributo indica que se debe mover el borde derecho de un cuadro.Cambiar tamaño:El cursor en este atributo representa un cursor de cambio de tamaño bidireccional.Ayuda:En esta propiedad, el cursor muestra que se puede acceder a la asistencia.Mover:El puntero en esta propiedad implica que se debe mover algo.. n-cambiar tamaño:Cuando se utiliza la propiedad n-resize, el puntero muestra que se debe desplazar el límite superior de un cuadro.Qué cambiar el tamaño:Con esta propiedad, el cursor muestra que el borde de un cuadro debe desplazarse hacia la derecha y hacia arriba.Nuevo cambio de tamaño:El cursor de cambio de tamaño bidireccional se indica mediante este atributo.Ns-redimensionar:Un cursor de cambio de tamaño bidireccional se indica mediante el atributo ns-resize.Nuevo tamaño:El cursor en este atributo muestra que los bordes superior e inferior de un cuadro deben moverse hacia arriba y hacia la izquierda.Cambiar el tamaño de la nariz:El cursor de cambio de tamaño bidireccional se indica mediante este atributo.Ninguna gota:El cursor en este atributo indica que el objeto extraído no se puede volcar en esta ubicación.Ninguno:No se muestra ningún cursor para el elemento según este atributo.No permitido:El cursor en esta propiedad indica que la acción solicitada no se llevará a cabo.Puntero:El cursor en esta propiedad sirve como puntero y muestra el progreso del enlace.Progreso:El cursor en este atributo muestra que el programa está activo.Cambiar tamaño de fila:El cursor muestra que esta función permite cambiar el tamaño de las filas verticales.Cambiar tamaño S:Cuando se utiliza esta propiedad, el puntero muestra que se debe reducir el límite inferior de un cuadro.Cambiar tamaño:El cursor en este atributo indica que el borde de un cuadro debe desplazarse hacia la derecha y hacia abajo.Cambiar tamaño:El cursor en este atributo indica que se deben mover los bordes izquierdo e inferior de un cuadro.Texto:El cursor en este atributo indica el texto que se puede elegir.URL:Esta propiedad contiene una lista de URL de cursor personalizados separadas por comas y un cursor genérico al final de la lista.Texto vertical:El cursor en este atributo muestra posibles selecciones de texto vertical.W-cambiar tamaño:Cuando se utiliza esta propiedad, el puntero muestra que se debe mover el borde izquierdo de un cuadro.

Ejemplo

Este ejemplo muestra cómo utilizar la propiedad del cursor. El programa está ocupado ya que el valor de la propiedad del cursor está configurado en espera.

 CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> 

Producción

r en lenguaje c

Podemos especificar el tipo de cursor que se debe mostrar al usuario usando la propiedad de cursor CSS. El uso de fotografías como botones de envío en formularios es una aplicación útil de esta capacidad. De forma predeterminada, aparece una mano en lugar de un puntero cuando el cursor está encima de un enlace.