-
CSS - Fundamentos Básicos
-
Lecture 1CSS – Tutorial
-
Lecture 2CSS – Introdução
-
Lecture 3CSS – Sintaxe
-
Lecture 4CSS – Unidades de medida
-
Lecture 5CSS – Cores
-
Lecture 6CSS – Backgrounds
-
Lecture 7CSS – Fonts
-
Lecture 8CSS – Text
-
Lecture 9CSS – Usando imagens
-
Lecture 10CSS – Links
-
Lecture 11CSS – Tabelas
-
Lecture 12CSS – Bordas
-
Lecture 13CSS – Listas
-
Lecture 14CSS – Margins
-
Lecture 15CSS – Paddings
-
Lecture 16CSS – Cursores
-
Lecture 17CSS – barras de rolagem
-
Lecture 18CSS – Dimensão
-
Lecture 19CSS – Outlines
-
CSS – Cursores
A propriedade cursor do CSS permite que você especifique o tipo de cursor que deve ser exibido para o usuário.
Um bom uso dessa propriedade é usar imagens para botões de envio em formulários. Por padrão, quando um cursor passa sobre um link, o cursor muda de um ponteiro para uma mão. No entanto, isso não altera o formulário de um botão de envio em um formulário. Portanto, sempre que alguém passa o mouse sobre uma imagem que é um botão de envio, isso fornece uma dica visual de que a imagem é clicável.
A seguinte tabela mostra os valores possíveis para a propriedade do cursor.
| Sr.No. | Value & Description |
|---|---|
| 1 | auto
A forma do cursor depende da área de contexto sobre a qual ele está. Por exemplo, um I sobre o texto, uma mão sobre um link e assim por diante… |
| 2 | crosshair
Uma cruz ou sinal de mais |
| 3 | default
Uma flecha |
| 4 | pointer
Uma mão apontando (no IE 4 este valor é uma mão) |
| 5 | move
A barra I |
| 6 | e-resize
O cursor indica que uma borda de uma caixa deve ser movida para a direita (leste) |
| 7 | ne-resize
O cursor indica que uma borda de uma caixa deve ser movida para cima e para a direita (norte / leste) |
| 8 | nw-resize
O cursor indica que uma borda de uma caixa deve ser movida para cima e para a esquerda (norte / oeste) |
| 9 | n-resize
O cursor indica que uma borda de uma caixa deve ser movida para cima (norte) |
| 10 | se-resize
O cursor indica que uma borda de uma caixa deve ser movida para baixo e para a direita (sul / leste) |
| 11 | sw-resize
O cursor indica que uma borda de uma caixa deve ser movida para baixo e para a esquerda (sul / oeste) |
| 12 | s-resize
O cursor indica que uma borda de uma caixa deve ser movida para baixo (sul) |
| 13 | w-resize
O cursor indica que uma borda de uma caixa deve ser movida para a esquerda (oeste) |
| 14 | text
A barra I |
| 15 | wait
Uma ampulheta |
| 16 | help
Um ponto de interrogação ou balão, ideal para usar nos botões de ajuda |
| 17 | <url>
A fonte de um arquivo de imagem de cursor |
NOTA – Você deve tentar usar apenas esses valores para adicionar informações úteis para os usuários e, em alguns lugares, eles esperariam ver esse cursor. Por exemplo, usar a cruz quando alguém passa o mouse sobre um link pode confundir os visitantes.
Aqui está um exemplo:
<html> <head> </head> <body> <p>Move the mouse over the words to see the cursor change:</p> <div style = "cursor:auto">Auto</div> <div style = "cursor:crosshair">Crosshair</div> <div style = "cursor:default">Default</div> <div style = "cursor:pointer">Pointer</div> <div style = "cursor:move">Move</div> <div style = "cursor:e-resize">e-resize</div> <div style = "cursor:ne-resize">ne-resize</div> <div style = "cursor:nw-resize">nw-resize</div> <div style = "cursor:n-resize">n-resize</div> <div style = "cursor:se-resize">se-resize</div> <div style = "cursor:sw-resize">sw-resize</div> <div style = "cursor:s-resize">s-resize</div> <div style = "cursor:w-resize">w-resize</div> <div style = "cursor:text">text</div> <div style = "cursor:wait">wait</div> <div style = "cursor:help">help</div> </body> </html>