Trabalhar o cursor do mouse

Para um desenvolvedor web ou programador de jogos usando Html, CSS e JavaScript é muito importante saber como trabalhar o cursor do mouse.

Mudar o cursor do mouse com CSS

Para mudar o cursor do mouse com CSS, basta usar a sintaxe:

.clas{
     cursor: pointer;
}

Modificando o cursor do mouse

Podemos colocar qualquer tipo de icone padrão do sistema operacional, mudando para essas opções:

 – Crosshair: Para precisão; posicionamento; 
 – Default: Padrão do sistema (seta); 
 – Pointer: Objeto clicável; 
 – Move: Objeto móvel;
 – Text: Selecionar ou editar um texto; 
 – Wait: Icone de espera ou carregamento;
 – Help: Ajuda; 
 – e-resize: Direita; 
 – ne-resize: Diagonal cima-direita;
 – n-resize: Cima; 
 – nw-resize: Diagonal cima-esquerda; 
 – w-resize: Esquerda; 
 – sw-resize: Diagonal baixo-esquerda;
 – s-resize: Baixo;
 – se-resize: Diagonal baixo-direita.

Usando imagem no cursor do mouse

Para usar imagem no cursor do mouse, basta:

.clas{
     cursor: url(http://www.webcis.com.br/images/lupa-clientes.cur), default;
}

Para que seja possível a substituição do cursor, é necessário que a imagem a ser utilizada esteja nos formatos .cur ou .gif (para imagens estáticas) ou .ani (para animações, como o exemplo acima) e que a imagem esteja hospedada em seu próprio site ou qualquer outro link externo.

Sou apoiado pela HomeHost, se você quer uma hospedagem de qualidade e segura, essa pode ser uma boa escolha!

Se esse conteúdo te foi útil, colabore na Vakinha!