Cambiar el cursor a un puntero de mano en CSS

1. Uso de la propiedad cursor para cambiar el puntero del mouse a un puntero de mano en CSS
2. Uso de la función url() en la propiedad cursor para cambiar el puntero del mouse a un puntero de mano personalizado en CSS

Este artículo presentará métodos para cambiar el puntero del mouse a un puntero de mano mientras mueve el mouse para enumerar elementos en CSS.

Uso de la propiedad cursor para cambiar el puntero del mouse a un puntero de mano en CSS

Podemos cambiar cómo se muestra el puntero del mouse cuando se apunta sobre un elemento específico usando la propiedad CSS cursor.

Por ejemplo, podemos usar la propiedad para cambiar el puntero del mouse a un puntero de mano estableciendo el valor de la propiedad cursor a pointer. Podemos seleccionar el elemento específico en CSS y aplicar esta propiedad.

La propiedad cursor tiene una gran cantidad de opciones. Algunas opciones son help, wait, crosshair, not-allowed, zoom-in, etc.

Por ejemplo, cree algunos elementos de la lista utilizando las etiquetas ul y li en HTML, seleccione la etiqueta li en CSS y establezca la propiedad cursor en pointer. A medida que movemos el puntero del mouse a los elementos de la lista, el puntero del mouse cambiará a una mano que señala.

De esta manera, podemos cambiar el puntero del mouse por el puntero de la mano en CSS.

Código de ejemplo:

<ul>
<li> Porcupine Tree</li>
<li>Opeth</li>
</ul>

li {
 cursor: pointer;
}

Uso de la función url() en la propiedad cursor para cambiar el puntero del mouse a un puntero de mano personalizado en CSS

También podemos agregar un puntero de mano personalizado usando la función url() en la propiedad cursor de CSS.

Debemos especificar la URL de la imagen en la función url(). Podemos especificar varias URL como respaldo, de modo que si una no funciona, la otra podría funcionar.

Las múltiples funciones url() están separadas por una coma. Cuando el puntero del mouse se mueve a un elemento específico, se mostrará el puntero personalizado.

Podemos establecer la URL del puntero de mano personalizado en la función para cambiar el puntero del mouse al puntero de mano en CSS.

Por ejemplo, use la misma lista que en el primer método para la demostración. En CSS, seleccione la etiqueta li, escriba la propiedad cursor y establezca la propiedad cursor en la función url() donde la URL https://img.icons8.com/nolan/32/hand-cursor.png es el parámetro. A continuación, escriba auto después de una coma como alternativa.

Por lo tanto, podemos usar la función url() para crear un puntero de mano personalizado y mostrarlo mientras pasamos el cursor sobre una lista en CSS.

Código de ejemplo:

<ul>
<li> Porcupine Tree</li>
<li>Opeth</li>
</ul>

li {
 cursor: url("https://img.icons8.com/nolan/32/hand-cursor.png"), auto;
}