Cursor do Mouse

Efeito Visual (Visual Effect)

Cursor (Cursor)

Descrição:
Define o tipo de cursor que será exibido.

Exemplo:
cursor: crosshair;

manual
cursor:url("cursor.ANI");

Passe o mouse
alvo
cursor: crosshair;

Passe o mouse.
texto
cursor: text;

Passe o mouse.
aguardar
cursor: wait;

Passe o mouse.
padrão
cursor: default;

Passe o mouse.
mãosinha
cursor: pointer

Passe o mouse.
ajuda
cursor: help;

Passe o mouse.
redimencionar à direita
cursor: e-resize;

Passe o mouse.
redimencionar à direita e acima
cursor: ne-resize;

Passe o mouse.
redimencionar acima
cursor: n-resize;

Passe o mouse.
redimencionar à esquerda e acima
cursor: nw-resize;

Passe o mouse.
redimencionar à esquerda
cursor: w-resize;

Passe o mouse.
redimencionar à esquerda e abaixo
cursor: sw-resize;

Passe o mouse.
redimencionar abaixo
cursor: s-resize;

Passe o mouse.
redimencionar à direita e abaixo
cursor: se-resize;

Passe o mouse.
automático
cursor: auto;

Passe o mouse.

Os valores CSS para o cursor

Abaixo uma lista com os valores CSS admitidos para estilização do cursor.

Passe o mouse sobre o valor, para ver o aspecto do cursor.

cursor: wait

cursor: crosshair

cursor: n-resize

cursor: se-resize

cursor: help

cursor: text

cursor: ne-resize

cursor: sw-resize

cursor: pointer

cursor: move

cursor: nw-resize

cursor: e-resize

cursor: default

cursor: w-resize

cursor: s-resize

CSS3 Cursor Styles

We have more styles to choose from in CSS3. These work in IE9 and the latest versions of Firefox, Chrome, Safari and Opera except where indicated:

cursor: none (not IE, Safari, Opera)

cursor: context-menu (not Firefox, Chrome)

cursor: cell (not Safari)

cursor: vertical-text

cursor: alias (not Safari)

cursor: copy (not Safari)

cursor: no-drop

cursor: not-allowed

cursor: ew-resize

cursor: ns-resize

cursor: nesw-resize

cursor: nwse-resize

cursor: col-resize

cursor: row-resize

cursor: all-scroll

Browser-Specific Cursors

Mozilla and some editions of Chrome and Safari offer a number of vendor-prefixed cursor styles which are likely to become part of the CSS3 specification:

cursor: -webkit-grab; cursor: -moz-grab;

cursor: -webkit-grabbing; cursor: -moz-grabbing;

cursor: -webkit-zoom-in; cursor: -moz-zoom-in;

cursor: -webkit-zoom-out; cursor: -moz-zoom-out;

Creating Your Own Cursor

Finally, you can create your own cursor graphic, e.g

Sintaxe:
cursor: url(images/cursor.png) x y, auto;

Cursor Transparente

cursor: url(images/cursor.png) 19 19, auto;

Cursor Animado

cursor: url(images/cursor_animado.gif) 30 30, auto;

Note:

Internet Explorer requires a Windows cursor file (.cur).
Firefox, Chrome and Safari require an image — I’d recommend a 24-bit alpha-transparent PNG.
Firefox also requires a second non-URL cursor fallback value.
It’s not supported in Opera.
x and y are optional properties in Firefox, Chrome and Safari which define the precise pointer position from the top-left of the graphic. If omitted, 0 0 is assumed.

Nice, but it sounds like too much effort to me! I’ll be sticking with the standard cursor styles…

Cursor Animado

Também é possível utilizar um cursor personalizado:

O código para um cursor da Internet, seria o seguinte, recomendo-lhe que utilize a Folha de Estilos CSS, que pode ser encontrada em:

cursor: url('Endereço do cursor');

Em Endereço do cursor, aqui deverá adicionar o endereço do seu cursor, mas lembre-se de que ele deve terminar em ".png".

<html>
<head>
<title>Untitled Document</title>
</head>
<style TYPE="text/css">

</style>
<body>
<p id="cursor" style="width:400px; height400px; background-color:#00FF99"> </p>
</body>
</html>

Passe o mouse em cima do quadrado e veja o resultado: