Em 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 deseja exibir na tela. Como recurso adicional, também permite definir sua própria imagem de cursor.

Neste guia, você aprenderá:

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

Então vamos começar!

O que é a propriedade CSS “cursor”?

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

Sintaxe

A sintaxe da propriedade cursor é dada como:

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

Vamos agora passar para o exemplo para alterar o cursor regular em uma imagem ao passar o mouse.

Como alterar o cursor para imagem ao passar o mouse usando CSS?

Para alterar o cursor para uma imagem ao passar o mouse, primeiro adicione um elemento em HTML.

Exemplo 1: Alterando o cursor para uma imagem ao passar o mouse usando a propriedade cursor

Vamos criar um cabeçalho

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

HTML

< corpo >
< h1 > Alterar o cursor para imagem ao passar o mouse h1 >
< botão classe = 'btn' > Clique em mim botão >
corpo >

Atualmente, passar o mouse sobre o 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 “i com.svg ” como nossa imagem selecionada. Em seguida, defina o valor da propriedade do cursor como “ auto ”.

CSS

.btn {
cursor: url ( icon.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 foi alterado com sucesso para uma imagem ao passar o mouse.

Observação: “ auto ” é usado como opção alternativa na propriedade do cursor; quando a imagem não carrega ou o caminho do arquivo ou o próprio arquivo está ausente, o ícone padrão é exibido na tela devido ao valor automático.

Exemplo 2: Definindo o cursor padrão ao passar o mouse

Por exemplo, daremos a url da imagem e apenas definiremos o valor da propriedade do cursor como “ auto ”:

cursor: url ( ) , automático;

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

Exemplo 3: Definir alternativa de imagem ao passar o mouse

No lugar de auto, você pode definir diferentes valores do cursor que deseja exibir como alternativa à imagem. Por exemplo, vamos alterar o valor da propriedade cursor de “ auto ' para ' ponteiro ”:

cursor: url ( ) , ponteiro;

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

Fornecemos o método mais fácil para alterar a imagem do cursor ao passar o mouse usando CSS.

Conclusão

Em CSS, você pode mudar o cursor para a imagem ao passar o mouse usando o “ cursor ' propriedade. Permite mudar um cursor regular para uma imagem atribuindo o “ URL ” da imagem para a propriedade do cursor. Você pode aplicar qualquer tipo de cursor que deseja exibir quando ele passar o mouse sobre um elemento. Este artigo demonstrou o método de alterar o cursor para um ponteiro de mão.