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>() (en-US) 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 = 
[ (en-US) [ (en-US) <url> | (en-US) <url-set> ] (en-US) [ (en-US) <x> <y> ] (en-US)? (en-US) ] (en-US)# (en-US)? (en-US) [ (en-US) auto | (en-US) default | (en-US) none | (en-US) context-menu | (en-US) help | (en-US) pointer | (en-US) progress | (en-US) wait | (en-US) cell | (en-US) crosshair | (en-US) text | (en-US) vertical-text | (en-US) alias | (en-US) copy | (en-US) move | (en-US) no-drop | (en-US) not-allowed | (en-US) grab | (en-US) grabbing | (en-US) e-resize | (en-US) n-resize | (en-US) ne-resize | (en-US) nw-resize | (en-US) s-resize | (en-US) se-resize | (en-US) sw-resize | (en-US) w-resize | (en-US) ew-resize | (en-US) ns-resize | (en-US) nesw-resize | (en-US) nwse-resize | (en-US) col-resize | (en-US) row-resize | (en-US) all-scroll | (en-US) zoom-in | (en-US) zoom-out ] (en-US)

<url> =
<url()> | (en-US)
<src()>

<x> =
x

<y> =
y

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

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

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 (en-US) values made absolute
Animation type (en-US)discrete

Compatibilidade

BCD tables only load in the browser

Veja também