Tipos de Cursores do Mouse

Exemplo de uso pelo default do browser

O cursor do mouse é muito útil quando queremos destacar uma mudança na funcionalidade da área onde o cursor do mouse se encontra.

Por exemplo se você estiver passando o mouse por este texto vai notar que ele é uma seta (default) e ao passar por cima deste texto ( além dele ter ficado azul ) notará que ele muda para uma 'mãozinha'(pointer) indicando que não é mais um simples texto que está sob o cursor mas um link e há uma diferença entre os 2 tipos de texto, o link ao ser clicado provocará uma navegação para outra página, coisa que o texto não faz.

Portanto este recurso é muito útil e podemos usar este recurso para influenciar como ele é exibido para o usuário denotando uma mudança de funcionalidade do funcionamento do seu clique.

Note que eu já vi diferenças na exibição de um browser para outro. Este documento se baseia nos browsers mais usados hoje, Google Chrome e Microsoft Edge.

Exemplos

Se você passar o mouse sobre a área azul do cabeçalho acima (Exemplos) ele será do tipo seta (Default). Ele apenas aponta para um ponto da página mas não faz nada ao ser clicado. Mas se você passar pelo texto (Exemplos) ele vira um cursor texto, vide abaixo.

Por outro lado ao passar o mouse por aqui ele será do tipo texto(text) e indica um texto de leitura. Ao ser clicado ele não faz nada mas se você clicar e arrastar o mouse vai selecionar o texto o que possibilita copiar e colar o texto selecionado para outro local de destino.

Exemplo de uso pela css

Este é um parágrafo tipo texto e portanto o mouse deveria ser tipo text ( um I ) como no exemplo acima. Contudo eu coloquei um estilo cursor: crosshair; e passando o mouse sobre ele o mouse ficou com esse estilo, crosshair

A mudança do tipo do cursor é feito por um parâmetro no estilo de exibição, no exemplo acima foi:
<p style="cursor: crosshair;">

Note que apesar do estilo do cursor ter mudado eu posso clicar e arrastar o mouse selecionando o texto sob o cursor. Portanto herda o estilo do cursor tipo texto quando sob ele estiver um texto.

Tipos de Cursor de Mouse


Nome Exibição Clique/Arrasto Funcionalidade
Default Não Nenhuma
Pointer Sim Link