CSS - cursor

Descrição

A propriedade curosr é usada em dispositivos de áudio para reproduzir um som após um elemento.

Valores possíveis

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

Sr. Não.	Valor e descrição
1	auto A forma do cursor depende da área de contexto sobre a qual ele está. Por exemplo, um I sobre o texto, uma passagem 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 locais onde eles esperariam ver esse cursor. Por exemplo, usar a cruz quando alguém passa o mouse sobre um link pode confundir os visitantes.

Aplica-se a

Todos os elementos HTML.

Sintaxe DOM

object.style.cueAfter = url("music.wav");

Exemplo

Aqui está o 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, tente mover o ponteiro do mouse sobre propriedades diferentes -

↰ Previous page