No CSS, vários tipos de cursores são usados ​​para diferentes elementos HTML e para alterar o tipo de cursor, o “cursor”Propriedade é usada. Ele permite que você altere o tipo de cursor e defina o valor do cursor que você deseja exibir na tela. Como um recurso adicional, ele também permite definir sua própria imagem de cursor.

Neste guia, você aprenderá:

• O que é a propriedade CSS CSS
• Como mudar o cursor para a imagem no passeio usando CSS

Então vamos começar!

O que é a propriedade "cursor" CSS?

Para controlar a aparência do mouse sobre um elemento html, o “cursor”A propriedade do CSS pode ser usada. Ele permite mudar o cursor regular em diferentes tipos, como cursor de cópia, ponteiro da mão, agarrar e muito mais. Você também pode definir seu próprio cursor personalizado, definindo o URL da imagem na propriedade Cursor.

Sintaxe

A sintaxe da propriedade Cursor é dada como:

cursor: url ();

Na sintaxe acima, atribua o caminho da imagem no “url ()”Que você deseja exibir na tela.

Agora vamos nos mudar para o exemplo para mudar o cursor regular em uma imagem no mouse.

Como mudar o cursor para a imagem no passeio usando CSS?

Para alterar o cursor para uma imagem no passe, primeiro, adicione um elemento em HTML.

Exemplo 1: Alterando o cursor para uma imagem no passeio usando a propriedade Cursor

Vamos criar um título

e nome da classe de botão “btn”.

Html

Altere o cursor para a imagem no mouse

Clique em mim

Atualmente, pairando no botão mostrará o cursor padrão:

Agora vá para o CSS e mude o cursor para a imagem.

Em seguida, defina o caminho da imagem no “url ()”. Por exemplo, especificamos “euvigarista.svg”Como nossa imagem selecionada. Em seguida, defina o valor da propriedade Cursor como “auto”.

CSS

.btn
Cursor: URL (ícone.svg), automático;
preenchimento: 10px;

Salve o código acima e execute o arquivo HTML para ver o seguinte resultado:

A saída fornecida indica que o cursor é alterado com sucesso em uma imagem no mouse.

Observação: ““auto”É usado como uma opção alternativa na propriedade Cursor; Quando a imagem não carrega, ou o caminho ou o arquivo em si está faltando, o ícone padrão é exibido na tela devido ao valor automático.

Exemplo 2: Configurando o cursor padrão no mouse

Por exemplo, daremos o URL da imagem e definiremos apenas o valor da propriedade Cursor como “auto”:

cursor: url (), automático;

Como resultado, o cursor não mudará quando pairou sobre o botão:

Exemplo 3: Definindo a imagem alternativa no mouse

No lugar do automóvel, você pode definir diferentes valores do cursor que deseja exibir como uma alternativa à imagem. Por exemplo, mudaremos o valor da propriedade Cursor de “auto" para "ponteiro”:

cursor: url (), ponteiro;

Como você pode ver na saída abaixo, o cursor é alterado em um ponteiro de mão quando paira sobre o botão:

Fornecemos o método mais fácil para alterar a imagem do cursor no passeio usando CSS.

Conclusão

No CSS, você pode alterar o cursor para a imagem em pairar usando o “cursor" propriedade. Ele permite alterar um cursor regular para uma imagem atribuindo o “url”Da imagem da propriedade Cursor. Você pode aplicar qualquer tipo de cursor que deseja exibir quando estiver pairado em um elemento. Este artigo demonstrou o método de alterar o cursor para um ponteiro da mão.