Como mudar o cursor para um ponteiro de mão no CSS

Existem muitos tipos de cursores que são usados ​​em telas diferentes. Você pode alterar o tipo de cursor usando a propriedade CSS Cursor, que especifica que tipo de cursor exibir para o usuário, por exemplo, ponteiro de mão, agarrar, copiar, etc. Podemos modificar um cursor regular em um ponteiro de mão, dando ao valor do 'ponteiro' à propriedade Cursor.

Neste artigo, aprenderemos:

• ““cursor" propriedade
• Sintaxe da propriedade Cursor
• Como mudar o cursor para um ponteiro à mão no CSS?

Vamos começar!

Propriedade CSS “Cursor”

CSS “cursor”Propriedades controlam a aparência do ponteiro do mouse quando está acima de um elemento. A propriedade Cursor no CSS nos permite alterar um cursor regular para um cursor da mão, copiar cursor, cursor de células, cursor de pegador, etc. Cada forma do cursor serve para propósitos diferentes. Por exemplo, o cursor da cópia indica a cópia do texto, e o ponteiro da mão indica clicar em links ou menus. Agora passamos para a sintaxe da propriedade Cursor.

Sintaxe da propriedade Cursor

A sintaxe da propriedade Cursor é:

cursor: valor;

No lugar de 'valor', Podemos atribuir o valor do cursor que queremos exibir na tela. Por exemplo, ponteiro, copiar, agarrar e muito mais.

Depois de entender a sintaxe do cursor, mudaremos para o exemplo em que modificamos o cursor regular em um ponteiro de mão.

Como mudar o cursor para um ponteiro de mão no CSS?

Vamos considerar um exemplo prático para ilustrar o funcionamento da propriedade Cursor.

Exemplo

Neste exemplo, criaremos uma lista no arquivo HTML que contém três itens:

• Html


• CSS


• JavaScript

Atualmente, nosso cursor se parece com o seguinte:

Depois disso, mudaremos para o arquivo CSS e definiremos o valor do cursor como “ponteiro”Para mudar o tipo de cursor para o ponteiro da mão. Além disso, definiremos a margem da lista como “25px”E a margem-esquerda como“500px”Isso ocorre porque criará espaço entre os itens da lista e também do lado esquerdo da lista:

li
Cursor: Ponteiro;
margem: 25px;
margem-esquerda: 500px;

Definimos o valor do cursor para “ponteiro“, Que mudará para um ponteiro da mão quando o usuário passará o mouse sobre um item da lista.

Após a implementação do Código CSS, vá para o HTML e veja o resultado:

Aqui, podemos ver que sempre que o cursor se move para o item da lista, ele muda para um ponteiro da mão. Isto é por causa do “cursor" propriedade

Conclusão

A propriedade Cursor em CSS permite alterar um cursor regular para um ponteiro de mão. Para modificar o cursor regular a um ponteiro da mão, você deve atribuir o “ponteiro”Valor para a propriedade Cursor. Você pode aplicar qualquer tipo de cursor que deseja exibir na tela. Este artigo demonstra o método de alterar o cursor para um ponteiro da mão.