MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Sumário

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

Initial valueauto
Aplica-se aall elements
Inheritedyes
Midiavisual, interactive
Computed valueas specified, but with url values made absolute
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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 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: bug 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).
Selection 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 text can be selected, normalmente um I maiúsculo virado de lado.
Drag and drop alias alias.gif Indicating an alias or shortcut is to be created.
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 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 not-allowed.gif Cursor showing that something cannot be done.
Resize & scrolling all-scroll all-scroll.gif Cursor showing that something can be scrolled in any direction (panned).
bug 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

[ [ <url> [ <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

Especificação Estado Comentário
CSS Basic User Interface Module Level 3
The definition of 'cursor' in that specification.
Recomendação proposta Adição de várias keywords e sintaxe de posicionamento para url().
CSS Level 2 (Revision 1)
The definition of 'cursor' in that specification.
Recomendação Definição inicial

Compatibilidade

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
auto, crosshair, default, move, text, wait, help,
n-resize, e-resize, s-resize, w-resize,
ne-resize, nw-resize, se-resize, sw-resize
1.0 1.0 4.0[1] 7.0 1.2
pointer, progress 1.0 1.0 6.0 7.0 1.2
url() 1.0 1.5
4.0[2]
6.0 ? 3.0
Positioning syntax for url() values (Yes) (Yes) Não suportado ? (Yes)
not-allowed, no-drop, vertical-text, all-scroll,
col-resize, row-resize
1.0 1.5 6.0 10.6 3.0
alias, cell, copy,
ew-resize, ns-resize, nesw-resize, nwse-resize
1.0 1.5 10.0 10.6 3.0
context-menu 1.0[3] 1.5[3] 10.0 10.6 3.0
none 5.0 3.0 9.0 15.0 5.0
inherit 1.0 1.0 8.0 9.0 1.2
zoom-in, zoom-out

1.0 -webkit-
37

1.0 -moz-
24.0
Não suportado 11.6
15-23 -webkit-
24
3.0 -webkit-
9
grab, grabbing 1.0 -webkit-
22.0 -webkit-[4]
1.5 -moz-
27.0
Não suportado (Yes) 4.0 -webkit-
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
auto, crosshair, default, move, text, wait, help,
n-resize, e-resize, s-resize, w-resize,
ne-resize, nw-resize, se-resize, sw-resize
Não suportado ? ? ? ?
pointer, progress Não suportado ? ? ? ?
url() Não suportado ? ? ? ?
Positioning syntax for url() values Não suportado ? ? ? ?
not-allowed, no-drop, vertical-text, all-scroll,
col-resize, row-resize
Não suportado ? ? ? ?
alias, cell, copy,
ew-resize, ns-resize, nesw-resize, nwse-resize
Não suportado ? ? ? ?
context-menu Não suportado ? ? ? ?
none Não suportado ? ? ? ?
inherit Não suportado ? ? ? ?
zoom-in, zoom-out Não suportado ? ? ? ?
grab, grabbing Não suportado ? ? ? ?

[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

Etiquetas do documento e colaboradores

Etiquetas: 
 Colaboradores desta página: filipetorres, Jerffersonferreira
 Última atualização por: filipetorres,