--- title: cursor slug: Web/CSS/cursor tags: - CSS - Cursor - Referencia translation_of: Web/CSS/cursor ---
{{CSSRef}}

Sumário

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

{{cssinfo}}

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 {{cssxref("<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> {{experimental_inline}}
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

{{csssyntax}}

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
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}} {{Spec2('CSS3 Basic UI')}} Adição de várias keywords e sintaxe de posicionamento para url().
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}} {{Spec2('CSS2.1')}} Definição inicial

Compatibilidade

{{CompatibilityTable}}

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 {{CompatUnknown}} 3.0
Positioning syntax for url() values {{experimental_inline}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatNo}} {{CompatUnknown}} {{CompatVersionUnknown}}
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 {{property_prefix("-webkit-")}}
37

 1.0 {{property_prefix("-moz-")}}
24.0		 {{CompatNo}} 11.6
15-23 {{property_prefix("-webkit-")}}
24		 3.0 {{property_prefix("-webkit-")}}
9
grab, grabbing 1.0 {{property_prefix("-webkit-")}}
22.0 {{property_prefix("-webkit-")}}[4]		 1.5 {{property_prefix("-moz-")}}
27.0		 {{CompatNo}} {{CompatVersionUnknown}} 4.0 {{property_prefix("-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		 {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
pointer, progress {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
url() {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Positioning syntax for url() values {{experimental_inline}} {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
not-allowed, no-drop, vertical-text, all-scroll,
col-resize, row-resize		 {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
alias, cell, copy,
ew-resize, ns-resize, nesw-resize, nwse-resize		 {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
context-menu {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
none {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
inherit {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
zoom-in, zoom-out {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
grab, grabbing {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

[1] No IE11, quando cursor é aplicado em um elemento e este elemento está por baixo de um menu {{HTMLElement("select")}} aberto e o usuário paira sobre um item do menu {{HTMLElement("select")}} que está no sobre o elemento em questão, o cursor deste elemento será mostrado em vez do cursor do {{HTMLElement("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