cursor
Sumário
A propriedade CSS cursor especifica o cursor do mouse mostrado quando o ponteiro do mouse está sobre um elemento.
Experimente
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>
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
Cursor padrão, tipicamente uma seta. none
Nenhum cursor é mostrado. Links & status context-menu
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
Indicando que ajuda está disponível. pointer
E.g. Usado quando pairando o cursor sobre links, tipicamente uma mão. progress
O programa está processando em segundo plano, mas o o usuário ainda pode interagir com a interface (diferente de wait
).wait
O programa está ocupado (às vezes uma ampulheta ou relógio). Seleção cell
Indica que a célula pode ser selecionada. crosshair
Cursor de cruz, normalmente usado para indicar seleção em uma imagem bitmap. text
Indica que o texto pode ser selecionado, normalmente um I maiúsculo. vertical-text
Indica que o texto vertical pode ser selecionado, normalmente um I maiúsculo virado de lado. Arrastar e soltar alias
Indicando que um alias ou atalho deve ser criado. copy
Indica que algo será copiado. move
O item sob o mouse pode ser movido. no-drop
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
Cursor mostrando que uma ação não pode ser efetuada. Resize & scrolling all-scroll
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
The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating. row-resize
The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them. n-resize
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
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize
Indicates a bidirectional resize cursor. ns-resize
nesw-resize
nwse-resize
Zoom zoom-in
Indicates that something can be zoomed (magnified) in or out.
zoom-out
Grab grab
Indicates that something can be grabbed (dragged to be moved).
grabbing
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
.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 value | auto |
---|---|
Aplica-se a | all elements |
Inherited | yes |
Computed value | as specified, but with url values made absolute |
Animation type | discrete |
Compatibilidade
BCD tables only load in the browser