cursor

Sumário

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

Experimente

Sintaxe

css
/* 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 default.gif Cursor padrão, tipicamente uma seta.
none Nenhum cursor é mostrado.
Links & status context-menu context-menu.png 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 help.gif Indicando que ajuda está disponível.
pointer pointer.gif E.g. Usado quando pairando o cursor sobre links, tipicamente uma mão.
progress progress.gif O programa está processando em segundo plano, mas o o usuário ainda pode interagir com a interface (diferente de wait).
wait wait.gif O programa está ocupado (às vezes uma ampulheta ou relógio).
Seleção cell cell.gif Indica que a célula pode ser selecionada.
crosshair crosshair.gif Cursor de cruz, normalmente usado para indicar seleção em uma imagem bitmap.
text text.gif Indica que o texto pode ser selecionado, normalmente um I maiúsculo.
vertical-text vertical-text.gif Indica que o texto vertical pode ser selecionado, normalmente um I maiúsculo virado de lado.
Arrastar e soltar alias alias.gif Indicando que um alias ou atalho deve ser criado.
copy copy.gif Indica que algo será copiado.
move move.gif O item sob o mouse pode ser movido.
no-drop no-drop.gif 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 not-allowed.gif Cursor mostrando que uma ação não pode ser efetuada.
Resize & scrolling all-scroll all-scroll.gif 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 col-resize.gif The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.
row-resize row-resize.gif The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
n-resize Example of a resize towards the top cursor 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 Example of a resize towards the right cursor
s-resize Example of a resize towards the bottom cursor
w-resize Example of a resize towards the left cursor
ne-resize Example of a resize towards the top-right corner cursor
nw-resize Example of a resize towards the top-left corner cursor
se-resize Example of a resize towards the bottom-right corner cursor
sw-resize Example of a resize towards the bottom-left corner cursor
ew-resize 3-resize.gif Indicates a bidirectional resize cursor.
ns-resize 6-resize.gif
nesw-resize 1-resize.gif
nwse-resize 4-resize.gif
Zoom zoom-in zoom-in.gif

Indicates that something can be zoomed (magnified) in or out.

zoom-out zoom-out.gif
Grab grab grab.gif

Indicates that something can be grabbed (dragged to be moved).

grabbing grabbing.gif

Sintaxe formal

cursor = 
[ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ 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 ]

<url> =
<url()> |
<src()>

<x> =
x

<y> =
y

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

Exemplos

css
.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

Specification
CSS Basic User Interface Module Level 4
# cursor

Definição formal

Initial valueauto
Aplica-se aall elements
Inheritedyes
Computed valueas specified, but with url values made absolute
Animation typediscrete

Compatibilidade

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também