cursor

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
Computed valueas specified, but with url values made absolute
Animation typediscrete

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

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!
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