CSS - Cursores

A propriedade cursor do CSS permite que você especifique o tipo de cursor que deve ser exibido para o usuário.

Um bom uso dessa propriedade é usar imagens para botões de envio em formulários. Por padrão, quando um cursor passa sobre um link, o cursor muda de um ponteiro para uma mão. No entanto, isso não altera o formulário de um botão de envio em um formulário. Portanto, sempre que alguém passa o mouse sobre uma imagem que é um botão de envio, isso fornece uma dica visual de que a imagem é clicável.

A tabela a seguir mostra os valores possíveis para a propriedade do cursor -

Sr. Não. Valor e descrição
1

auto

A forma do cursor depende da área de contexto em que ele está. Por exemplo, um I sobre o texto, uma mão sobre um link e assim por diante ...
2

crosshair

Uma cruz ou sinal de mais
3

default

Uma flecha
4

pointer

Uma mão apontando (no IE 4 este valor é uma mão)
5

move

A barra I
6

e-resize

O cursor indica que uma borda de uma caixa deve ser movida para a direita (leste)
7

ne-resize

O cursor indica que uma borda de uma caixa deve ser movida para cima e para a direita (norte / leste)
8

nw-resize

O cursor indica que uma borda de uma caixa deve ser movida para cima e para a esquerda (norte / oeste)
9

n-resize

O cursor indica que uma borda de uma caixa deve ser movida para cima (norte)
10

se-resize

O cursor indica que uma borda de uma caixa deve ser movida para baixo e para a direita (sul / leste)
11

sw-resize

O cursor indica que uma borda de uma caixa deve ser movida para baixo e para a esquerda (sul / oeste)
12

s-resize

O cursor indica que uma borda de uma caixa deve ser movida para baixo (sul)
13

w-resize

O cursor indica que uma borda de uma caixa deve ser movida para a esquerda (oeste)
14

text

A barra I
15

wait

Uma ampulheta
16

help

Um ponto de interrogação ou balão, ideal para usar com botões de ajuda
17

<url>

A fonte de um arquivo de imagem de cursor

NOTE- Você deve tentar usar apenas esses valores para adicionar informações úteis para os usuários e, em alguns lugares, eles esperariam ver esse cursor. Por exemplo, usar a cruz quando alguém passa o mouse sobre um link pode confundir os visitantes.

Aqui está um exemplo -

<html>
   <head>
   </head>
   
   <body>
      <p>Move the mouse over the words to see the cursor change:</p>
      
      <div style = "cursor:auto">Auto</div>
      <div style = "cursor:crosshair">Crosshair</div>
      <div style = "cursor:default">Default</div>
      
      <div style = "cursor:pointer">Pointer</div>
      <div style = "cursor:move">Move</div>
      <div style = "cursor:e-resize">e-resize</div>
      <div style = "cursor:ne-resize">ne-resize</div>
      <div style = "cursor:nw-resize">nw-resize</div>
      
      <div style = "cursor:n-resize">n-resize</div>
      <div style = "cursor:se-resize">se-resize</div>
      <div style = "cursor:sw-resize">sw-resize</div>
      <div style = "cursor:s-resize">s-resize</div>
      <div style = "cursor:w-resize">w-resize</div>
      
      <div style = "cursor:text">text</div>
      <div style = "cursor:wait">wait</div>
      <div style = "cursor:help">help</div>
   </body>
</html>

Isso produzirá o seguinte resultado -