Cómo cambiar el cursor a un puntero de mano en CSS

Hay muchos tipos de cursores que se usan en diferentes pantallas. Puede cambiar el tipo de cursor utilizando la propiedad del cursor CSS, que especifica qué tipo de cursor mostrar para el usuario, por ejemplo, puntero de mano, agarre, copia, etc. Podemos modificar un cursor regular en un puntero de mano dando el valor de 'puntero' a la propiedad del cursor.

En este artículo, aprenderemos:

• "cursor" propiedad
• Sintaxis de la propiedad del cursor
• Cómo cambiar el cursor a un puntero de mano en CSS?

Empecemos!

Propiedad CSS "cursor"

CSS "cursor"Las propiedades controlan la apariencia del puntero del mouse cuando está sobre un elemento. La propiedad del cursor en CSS nos permite cambiar un cursor regular a un cursor de mano, copiar cursor, cursor de celda, cursor de agarre, etc. Cada forma del cursor tiene diferentes propósitos. Por ejemplo, el cursor de copia indica copiar el texto, y el puntero de mano indica hacer clic en enlaces o menús. Ahora pasamos a la sintaxis de la propiedad del cursor.

Sintaxis de la propiedad del cursor

La sintaxis de la propiedad del cursor es:

cursor: valor;

En lugar de 'valor', podemos asignar el valor del cursor que queremos mostrar en la pantalla. Por ejemplo, puntero, copia, captura y muchos más.

Después de comprender la sintaxis del cursor, nos moveremos al ejemplo en el que modificamos el cursor regular en un puntero de mano.

Cómo cambiar el cursor a un puntero de mano en CSS?

Consideremos un ejemplo práctico para ilustrar el funcionamiento de la propiedad del cursor.

Ejemplo

En este ejemplo, crearemos una lista en el archivo HTML que contiene tres elementos:

• Html


• CSS


• Javascript

Actualmente, nuestro cursor se ve así:

Después de eso, nos moveremos al archivo CSS y estableceremos el valor del cursor en un "puntero"Cambiar el tipo de cursor al puntero a mano. Además, estableceremos el margen de la lista como "25px"Y el margen-izquierda como"500px"Esto se debe a que creará espacio entre los elementos de la lista y también desde el lado izquierdo de la lista:

li
cursor: puntero;
margen: 25px;
margen izquierda: 500px;

Hemos establecido el valor del cursor en "puntero", Que cambiará a un puntero de mano cuando el usuario se desplazará a través de un elemento de la lista.

Después de la implementación del código CSS, vaya al HTML y vea el resultado:

Aquí, podemos ver que cada vez que el cursor se mueve al elemento de la lista, cambia a un puntero de mano. Esto se debe a los "cursor" propiedad

Conclusión

La propiedad del cursor en CSS permite cambiar un cursor regular a un puntero de mano. Para modificar el cursor regular a un puntero de mano, debe asignar el "puntero"Valor a la propiedad del cursor. Puede aplicar cualquier tipo de cursor que desee mostrar en la pantalla. Este artículo demuestra el método de cambiar el cursor a un puntero de mano.