cursor

Sumário

A propriedade CSS cursor especifica o cursor do mouse mostrado quando o ponteiro do mouse está sobre um elemento.

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>

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. Veja Usando valores URL para a propriedade cursor para mais detalhes.

<x> <y>

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

Keyword values

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: bug 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).
Selection	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 text can be selected, normalmente um I maiúsculo virado de lado.
Drag and drop	alias		Indicating an alias or shortcut is to be created.
	copy		Indica que algo será copiado.
	move		O item sob o mouse pode ser movido.
	no-drop		Cursor showing that a drop is not allowed at the current location. bug 275173 on Windows and Mac OS X, "no-drop is the same as not-allowed".
	not-allowed		Cursor showing that something cannot be done.
Resize & scrolling	all-scroll		Cursor showing that something can be scrolled in any direction (panned). bug 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

[ [ <uri> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | 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 | grab | grabbing ] ]

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

Compatibilidade

[1] No IE11, quando cursor é aplicado em um elemento e este elemento está por baixo de um menu <select> aberto e o usuário paira sobre um item do menu <select> que está no sobre o elemento em questão, o cursor deste elemento será mostrado em vez do cursor do <select>. Veja IE bug 963961.

[2] Suporte para este foi adicionado no Mac OS X.

[3] Apenas suportado no Mac OS X e Linux.

[4] Suporte para isto foi adicionado no Windows.

Veja também

• Usando valores URL para a propriedade cursor
• pointer-events
• Propriedade cursor (MSDN)