Alterar Cursor para Ponteiro de Mão em CSS

1. Usando a propriedade cursor para mudar o ponteiro do mouse para um ponteiro manual em CSS
2. Usando a função url() na propriedade cursor para alterar o ponteiro do mouse para um ponteiro personalizado em CSS

Este artigo apresentará métodos para alterar o ponteiro do mouse para um ponteiro de mão enquanto move o mouse para listar itens em CSS.

Usando a propriedade cursor para mudar o ponteiro do mouse para um ponteiro manual em CSS

Podemos mudar a forma como o ponteiro do mouse é exibido ao apontar sobre um elemento específico usando a propriedade CSS cursor.

Por exemplo, podemos usar a propriedade para alterar o ponteiro do mouse para um ponteiro de mão, definindo o valor da propriedade cursor como pointer. Podemos selecionar o elemento específico em CSS e aplicar esta propriedade.

A propriedade cursor possui um grande número de opções. Algumas opções são help, wait, crosshair, not-allowed, zoom-in, etc.

Por exemplo, crie alguns itens de lista usando as tags ul e li em HTML, selecione a tag li em CSS e defina a propriedade cursor como ponteiro. Conforme movemos o ponteiro do mouse para os itens da lista, o ponteiro do mouse muda para uma mão apontando.

Desta forma, podemos mudar o ponteiro do mouse para o ponteiro da mão em CSS.

Código de exemplo:

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

li {
 cursor: pointer;
}

Usando a função url() na propriedade cursor para alterar o ponteiro do mouse para um ponteiro personalizado em CSS

Também podemos adicionar um ponteiro de mão personalizado usando a função url() na propriedade cursor do CSS.

Devemos especificar o URL da imagem na função url(). Podemos especificar vários URLs como fallback para que, se um não funcionar, o outro funcione.

As múltiplas funções url() são separadas por uma vírgula. Quando o ponteiro do mouse é movido para um elemento específico, o ponteiro personalizado é exibido.

Podemos definir a URL do ponteiro de mão personalizado na função para alterar o ponteiro do mouse para o ponteiro de mão em CSS.

Por exemplo, use a mesma lista do primeiro método para a demonstração. Em CSS, selecione a tag li, escreva a propriedade cursor e defina a propriedade cursor para a função url() onde o URL https://img.icons8.com/nolan/32/hand-cursor.pngé o parâmetro. Em seguida, escreva auto após uma vírgula como fallback.

Assim, podemos usar a função url() para criar um ponteiro de mão personalizado e mostrá-lo enquanto passamos o mouse sobre uma lista em CSS.

Código de exemplo:

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

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