cursor
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2021.
* Some parts of this feature may have varying levels of support.
Sumário
A propriedade CSS cursor especifica o cursor do mouse mostrado quando o ponteiro do mouse está sobre um elemento.
Experimente
cursor: help;
cursor: wait;
cursor: crosshair;
cursor: not-allowed;
cursor: zoom-in;
cursor: grab;
Move over this element to see the cursor style.
#example-element {
display: flex;
background-color: #1766aa;
color: white;
height: 180px;
width: 360px;
justify-content: center;
align-items: center;
font-size: 14pt;
padding: 5px;
}
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
Experimental-
Uma url(...) ou uma lista de url(...) separada por vírgula, apontando para uma arquivo de imagem. Mais que uma
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.
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 =
[ [| ] [ ]? ]#? [ 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(* ) |
=
src(* )
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 |