cursor

Experimente

cursor: help;

cursor: wait;

cursor: crosshair;

cursor: not-allowed;

cursor: zoom-in;

cursor: grab;

<section class="default-example container" id="default-example">
  <div id="example-element">
    Move over this element to see the cursor style.
  </div>
</section>

#example-element {
  display: flex;
  background-color: #1766aa;
  color: white;
  height: 180px;
  width: 360px;
  justify-content: center;
  align-items: center;
  font-size: 14pt;
  padding: 5px;
}

Sintaxe

/* Keywords */
cursor: pointer;
cursor: auto;

/* Usando URL e cordenadas */
cursor:
  url(cursor1.png) 4 12,
  auto;
cursor:
  url(cursor2.png) 2 2,
  pointer;

/* Valores globais */
cursor: inherit;
cursor: initial;
cursor: unset;

Valores

<uri> Experimental

Uma url(...) ou uma lista de url(...) separada por vírgula, apontando para uma arquivo de imagem. Mais que uma <uri> pode ser fornecida como fallback, em caso de alguns tipos de imagem não ser suportado. Um fallback não-URL (um ou mais dos outros valores) deve estar no final da lista de fallbacks.

<x> <y> Experimental

Coordenadas x e y opcionais. Dois números não-negativos, sem unidade e menores que 32.

Keyword

Mova o mouse sobre os valores para testar:

Categoria	Valor CSS	Actual	Descrição
General	auto		O brower determina o cursor para ser exibido baseado no contexto atual.
	default		Cursor padrão, tipicamente uma seta.
	none		Nenhum cursor é mostrado.
Links & status	context-menu		Um menu de contexto está disponível sob o cursor. Somente IE 10 e superior implementou esta propriedade no Windows: [Erro do Firefox 258960](https://bugzil.la/258960).
	help		Indicando que ajuda está disponível.
	pointer		E.g. Usado quando pairando o cursor sobre links, tipicamente uma mão.
	progress		O programa está processando em segundo plano, mas o o usuário ainda pode interagir com a interface (diferente de wait).
	wait		O programa está ocupado (às vezes uma ampulheta ou relógio).
Seleção	cell		Indica que a célula pode ser selecionada.
	crosshair		Cursor de cruz, normalmente usado para indicar seleção em uma imagem bitmap.
	text		Indica que o texto pode ser selecionado, normalmente um I maiúsculo.
	vertical-text		Indica que o texto vertical pode ser selecionado, normalmente um I maiúsculo virado de lado.
Arrastar e soltar	alias		Indicando que um alias ou atalho deve ser criado.
	copy		Indica que algo será copiado.
	move		O item sob o mouse pode ser movido.
	no-drop		Cursor mostrando que não é permitido largar um elemento no local atual. [Erro do Firefox 275173](https://bugzil.la/275173)no Windows e no Mac OS X, "sem soltar é o mesmo que não permitido".
	not-allowed		Cursor mostrando que uma ação não pode ser efetuada.
Resize & scrolling	all-scroll		Cursor showing that something can be scrolled in any direction (panned). [Erro do Firefox 275174](https://bugzil.la/275174) on Windows, "all-scroll is the same as move".
	col-resize		The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.
	row-resize		The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
	n-resize		Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
	e-resize
	s-resize
	w-resize
	ne-resize
	nw-resize
	se-resize
	sw-resize
	ew-resize		Indicates a bidirectional resize cursor.
	ns-resize
	nesw-resize
	nwse-resize
Zoom	zoom-in		Indicates that something can be zoomed (magnified) in or out.
	zoom-out
Grab	grab		Indicates that something can be grabbed (dragged to be moved).
	grabbing

Sintaxe formal

cursor = 
  <cursor-image>#? <cursor-predefined>  

<cursor-image> = 
  [ <url> | <url-set> ] [ <number>{2} ]?  

<cursor-predefined> = 
  auto           |
  default        |
  none           |
  context-menu   |
  help           |
  pointer        |
  progress       |
  wait           |
  cell           |
  crosshair      |
  text           |
  vertical-text  |
  alias          |
  copy           |
  move           |
  no-drop        |
  not-allowed    |
  grab           |
  grabbing       |
  e-resize       |
  n-resize       |
  ne-resize      |
  nw-resize      |
  s-resize       |
  se-resize      |
  sw-resize      |
  w-resize       |
  ew-resize      |
  ns-resize      |
  nesw-resize    |
  nwse-resize    |
  col-resize     |
  row-resize     |
  all-scroll     |
  zoom-in        |
  zoom-out       

Exemplos

.foo {
  cursor: crosshair;
}

/* use velor prefixado se "zoom-in" não for suportado */
.bar {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

/* valor padrão como fallback para url() deve ser fornecido (não funciona sem) */
.baz {
  cursor: url(hyper.cur), auto;
}

Especificações

Definição formal

Compatibilidade

Veja também

• <uri>
• pointer-events