Propriedade CSS cursor
A propriedade CSS cursor define a aparência do ponteiro ao passar sobre um elemento. Conheça todos os valores e veja exemplos de cada um.
A propriedade cursor controla a forma do ponteiro do mouse quando ele passa sobre um elemento. É uma dica visual: a forma do ponteiro indica ao usuário o que acontecerá ao clicar, arrastar ou passar o mouse — uma mão significa "isto é clicável", um cursor de texto significa "você pode selecionar texto aqui", uma roda girando significa "aguarde".
Esta página aborda quando usar cursor, a lista completa de valores de palavra-chave agrupados por finalidade, como carregar sua própria imagem como cursor personalizado (com a sintaxe <url> e seus fallbacks), e as armadilhas de acessibilidade a evitar.
Por que e quando usar
Os navegadores já escolhem um cursor adequado para cada elemento — um cursor de texto sobre um parágrafo, uma mão apontando sobre um link. Você sobrescreve o padrão principalmente quando:
- Você cria um controle interativo personalizado (um
<div>funcionando como botão, um cartão arrastável, uma alça de ordenação) onde o navegador não tem como adivinhar o cursor correto. Aqui, um cursorpointerougrabrestaura a indicação que os usuários esperam. - Você quer sinalizar estado — um controle desativado com
not-allowed, ou uma região ocupada comwait/progress. - Você precisa de um ponteiro personalizado estilizado ou para jogos via uma imagem customizada.
Use com moderação e de forma previsível. Um cursor que contradiz o comportamento (uma mão pointer sobre texto não clicável, ou none ocultando o cursor em uma página normal) confunde mais do que ajuda.
Visão geral da sintaxe
O valor é zero ou mais valores <url> separados por vírgula, cada um apontando para um arquivo de imagem, seguido de um fallback de palavra-chave obrigatório. O navegador tenta cada imagem em ordem e recorre à próxima se uma imagem não puder ser carregada; se nenhuma carregar, usa a palavra-chave. É por isso que a palavra-chave no final é obrigatória — ela garante que o usuário sempre obtenha algum cursor.
/* keyword only */
cursor: pointer;
/* custom image with a keyword fallback (the fallback is required) */
cursor: url("cursor.png"), auto;
/* multiple images tried in order, then the fallback */
cursor: url("cursor.svg"), url("cursor.png"), auto;Informação
Os navegadores modernos suportam grab, grabbing, zoom-in e zoom-out sem prefixos de fornecedor. Para manter os cliques onde os usuários esperam, combine alterações de cursor personalizado com as propriedades relacionadas pointer-events e user-select.
| Valor Inicial | auto |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdado | Sim. |
| Animável | Não. |
| Versão | CSS2 |
| Sintaxe DOM | object.style.cursor = "cell"; |
Todos os valores de palavra-chave
Cada palavra-chave que a propriedade aceita, em um único lugar. Os mais comuns no trabalho diário de UI são pointer (clicável), default (a seta simples), text, move, grab/grabbing e not-allowed.
cursor: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | <url> | vertical-text | alias | copy | move | no-drop | not-allowed | all-scroll | col-resize | row-resize | n-resize | s-resize | e-resize | w-resize | ns-resize | ew-resize | ne-resize | nw-resize | se-resize | sw-resize | nesw-resize | nwse-resize | zoom-in | zoom-out | grab | grabbingExemplo com os valores auto e help
Exemplo da propriedade CSS cursor com os valores auto e help
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
text-align: center;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
.auto {
cursor: auto;
}
.help {
cursor: help;
}
.cursor {
display: flex;
flex-wrap: wrap;
}
.cursor > div {
flex: 120px;
padding: 10px 2px;
white-space: nowrap;
border: 2px solid #666;
border-radius: 20px;
margin: 0 5px 5px 0;
}
.cursor > div:hover {
background: #eee;
}
</style>
</head>
<body>
<h2>Cursor property example</h2>
<div class="cursor">
<div class="auto">auto</div>
<div class="help">help</div>
</div>
</body>
</html>O próximo exemplo exibe uma caixa rotulada para cada valor de palavra-chave, para que você possa passar o mouse sobre cada uma e ver o cursor no seu navegador.
Exemplo mostrando todos os valores de cursor
Exemplo da propriedade CSS cursor com todos os valores
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
text-align: center;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
.cursor {
display: flex;
flex-wrap: wrap;
}
.cursor > div {
flex: 120px;
padding: 10px 2px;
white-space: nowrap;
border: 2px solid #666;
border-radius: 20px;
margin: 0 5px 5px 0;
}
.cursor > div:hover {
background: #eee;
}
.auto {
cursor: auto;
}
.default {
cursor: default;
}
.none {
cursor: none;
}
.context-menu {
cursor: context-menu;
}
.help {
cursor: help;
}
.pointer {
cursor: pointer;
}
.progress {
cursor: progress;
}
.wait {
cursor: wait;
}
.cell {
cursor: cell;
}
.crosshair {
cursor: crosshair;
}
.text {
cursor: text;
}
.vertical-text {
cursor: vertical-text;
}
.alias {
cursor: alias;
}
.copy {
cursor: copy;
}
.move {
cursor: move;
}
.no-drop {
cursor: no-drop;
}
.not-allowed {
cursor: not-allowed;
}
.all-scroll {
cursor: all-scroll;
}
.col-resize {
cursor: col-resize;
}
.row-resize {
cursor: row-resize;
}
.n-resize {
cursor: n-resize;
}
.e-resize {
cursor: e-resize;
}
.s-resize {
cursor: s-resize;
}
.w-resize {
cursor: w-resize;
}
.ns-resize {
cursor: ns-resize;
}
.ew-resize {
cursor: ew-resize;
}
.ne-resize {
cursor: ne-resize;
}
.nw-resize {
cursor: nw-resize;
}
.se-resize {
cursor: se-resize;
}
.sw-resize {
cursor: sw-resize;
}
.nesw-resize {
cursor: nesw-resize;
}
.nwse-resize {
cursor: nwse-resize;
}
.grab {
cursor: grab;
}
.grabbing {
cursor: grabbing;
}
.zoom-in {
cursor: zoom-in;
}
.zoom-out {
cursor: zoom-out;
}
</style>
</head>
<body>
<h2>Cursor property example</h2>
<p> Hover the mouse cursor over the element to see the changes</p>
<div class="cursor">
<div class="auto">auto</div>
<div class="default">default</div>
<div class="none">none</div>
<div class="context-menu">context-menu</div>
<div class="help">help</div>
<div class="pointer">pointer</div>
<div class="progress">progress</div>
<div class="wait">wait</div>
<div class="cell">cell</div>
<div class="crosshair">crosshair</div>
<div class="text">text</div>
<div class="vertical-text">vertical-text</div>
<div class="alias">alias</div>
<div class="copy">copy</div>
<div class="move">move</div>
<div class="no-drop">no-drop</div>
<div class="not-allowed">not-allowed</div>
<div class="all-scroll">all-scroll</div>
<div class="col-resize">col-resize</div>
<div class="row-resize">row-resize</div>
<div class="n-resize">n-resize</div>
<div class="s-resize">s-resize</div>
<div class="e-resize">e-resize</div>
<div class="w-resize">w-resize</div>
<div class="ns-resize">ns-resize</div>
<div class="ew-resize">ew-resize</div>
<div class="ne-resize">ne-resize</div>
<div class="nw-resize">nw-resize</div>
<div class="se-resize">se-resize</div>
<div class="sw-resize">sw-resize</div>
<div class="nesw-resize">nesw-resize</div>
<div class="nwse-resize">nwse-resize</div>
<div class="grab">grab</div>
<div class="grabbing">grabbing</div>
<div class="zoom-in">zoom-in</div>
<div class="zoom-out">zoom-out</div>
</div>
</body>
</html>Cursor personalizado com o valor "url"
Você pode fornecer sua própria imagem como cursor. Algumas regras tornam isso confiável:
- Sempre termine com um fallback de palavra-chave (
, autoabaixo). Sem ele, a declaração é inválida e é completamente ignorada. - Mantenha as imagens pequenas. Os navegadores limitam cursores personalizados a aproximadamente 32×32 px (128×128 px em alguns); imagens maiores são descartadas silenciosamente e o fallback é usado.
- Defina o hotspot — o ponto de clique ativo — com dois números opcionais após a URL:
cursor: url("crosshair.png") 16 16, auto;faz o centro de uma imagem 32×32 ser o ponto de clique. Omiti-los faz o canto superior esquerdo ser usado. - Use um formato que todos os navegadores alvo suportam (PNG e SVG são seguros;
.cur/.anisão exclusivos do Windows).
Exemplo da propriedade cursor com url
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.cursor {
display: inline-block;
width: 30px;
height: 30px;
cursor: url("/uploads/media/default/0001/04/6388ec92938ec31c9f019a249174f683118b55d6.png"), auto;
}
</style>
</head>
<body>
<h2>Cursor property example</h2>
<p> Hover the mouse cursor over the element to see the changes</p>
<i class="cursor">Icon</i>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| auto | Significa que o navegador definirá um cursor. É o valor padrão desta propriedade. | Experimente » |
| default | É o cursor padrão. | Experimente » |
| none | Significa que nenhum cursor é exibido para o elemento. | Experimente » |
| context-menu | O cursor indica que um menu de contexto está disponível. | Experimente » |
| help | O cursor indica que há ajuda disponível. | Experimente » |
| pointer | O cursor indica um link como um ponteiro. | Experimente » |
| progress | O cursor indica que o programa está ocupado ou em andamento. | Experimente » |
| wait | O cursor indica que o programa está ocupado. | Experimente » |
| cell | Significa que o cursor indicará que uma célula ou conjunto de células pode ser selecionado. | Experimente » |
| crosshair | O cursor será exibido como uma mira. | Experimente » |
| text | O cursor indica texto que pode ser selecionado. | Experimente » |
<url> | Uma lista separada por vírgulas de URLs para cursores personalizados. | Experimente » |
| vertical-text | O cursor indica texto vertical que pode ser selecionado. | Experimente » |
| alias | Significa que o cursor indicará que um alias de algo será criado. | Experimente » |
| copy | O cursor indica algo que pode ser copiado. | Experimente » |
| move | O cursor indica que algo pode ser movido. | Experimente » |
| no-drop | O cursor indica que o item arrastado não pode ser solto aqui. | Experimente » |
| not-allowed | O cursor indica que a ação solicitada não será executada. | Experimente » |
| all-scroll | Significa que o cursor indicará que algo pode ser rolado em qualquer direção. | Experimente » |
| col-resize | O cursor indica que a coluna pode ser redimensionada horizontalmente. | Experimente » |
| row-resize | O cursor indica que a linha pode ser redimensionada verticalmente. | Experimente » |
| n-resize | O cursor indica que uma borda de uma caixa deve ser movida para cima. | Experimente » |
| s-resize | O cursor indica que uma borda de uma caixa deve ser movida para baixo. | Experimente » |
| e-resize | O cursor indica que uma borda de uma caixa deve ser movida para a direita. | Experimente » |
| w-resize | O cursor indica que uma borda de uma caixa deve ser movida para a esquerda. | Experimente » |
| ns-resize | O cursor indica um cursor de redimensionamento bidirecional. | Experimente » |
| ew-resize | O cursor indica um cursor de redimensionamento bidirecional. | Experimente » |
| ne-resize | O cursor indica que uma borda de uma caixa deve ser movida para cima e para a direita. | Experimente » |
| nw-resize | O cursor indica que uma borda de uma caixa deve ser movida para cima e para a esquerda. | Experimente » |
| se-resize | O cursor indica que uma borda de uma caixa deve ser movida para baixo e para a direita. | Experimente » |
| sw-resize | O cursor indica que uma borda de uma caixa deve ser movida para baixo e para a esquerda. | Experimente » |
| nesw-resize | O cursor indica um cursor de redimensionamento bidirecional. | Experimente » |
| nwse-resize | O cursor indica um cursor de redimensionamento bidirecional. | Experimente » |
| zoom-in | O cursor indica que algo pode ser ampliado. | Experimente » |
| zoom-out | O cursor indica que algo pode ser reduzido. | Experimente » |
| grab | O cursor indica que algo pode ser agarrado. | Experimente » |
| grabbing | O cursor indica que um elemento está sendo arrastado no momento. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
Acessibilidade e armadilhas comuns
cursoré uma dica, não um controle. Ele muda a aparência do ponteiro, nunca o que o elemento faz. Um cursorpointernão torna um<div>clicável, enot-allowednão desativa um botão — você ainda precisa do comportamento real (umonclick, o atributodisabled, funções ARIA).- Não confie apenas no cursor para sinalizar estados desativados ou ocupados. Usuários de teclado e toque nunca o veem. Combine com estilos visíveis e os atributos corretos.
- Evite
cursor: noneem páginas comuns. Ocultar o ponteiro pode prender usuários que não conseguem mais encontrá-lo. Reserve para experiências em tela cheia (jogos, quiosques) que gerenciam seu próprio ponteiro. - Imagens personalizadas podem prejudicar a usabilidade se forem de baixo contraste, muito grandes ou com hotspot mal posicionado, fazendo os usuários clicarem ligeiramente fora do alvo. Teste em fundos claros e escuros.
cursoré herdado, portanto, um valor definido em um contêiner se aplica aos seus filhos, a menos que eles o substituam.
Propriedades relacionadas
- pointer-events — decide se um elemento reage ao ponteiro.
- user-select — controla se o texto pode ser selecionado (combina bem com
cursor: text/cursor: default). - :hover — altera estilos enquanto o ponteiro está sobre um elemento.
- caret-color — estiliza o cursor de texto piscante em campos de entrada, um "cursor" completamente diferente.
Prática
Prática
O que a propriedade CSS 'cursor' especifica no design web?
Was this page helpful?