Mudando o cursor do mouse

helldanger1 · Mai 19, 2009

Como mudar com CSS as opções por padrão dos cursores ao passar por certas partes da página.
Por Federico Elgarte

Nosso sistema operacional possui cursores por padrão. Aos cursores nos referimos ao ponteiro do mouse: a típica setinha ou qualquer outro desenho que possa ter.

No Windows podemos encontrar vários cursores que se ativam quando passamos por "certas zonas" de nossa tela. Por exemplo, quando nos posicionamos sobre um link, a típica setinha (denominada default em CSS) muda pela mãozinha (pinter). Como no exemplo anterior, podemos encontrar dezenas de situações onde nosso ponteiro muda de imagem.

Com a ajuda das folhas de estilo podemos forçar ao nosso sistema operacional que não seja regido mais sob as normas convencionais dos ponteiros; conseguindo assim um atraente desenho onde o ponteiro de nosso mouse pode chegar a ser até uma imagem de nossa própria criação

helldanger1 · Mai 19, 2009

A seguir, pode-se observar a lista dos cursores disponíveis por padrão no Windows:

•default (seta)
•crosshair (cruz)
•e-resize (seta que aponta à direita)
•hand (mão)
•help (sinal de pergunta)
•move (cruz com setas nas extremidades)
•n-resize (seta que aponta para cima)
•ne-resize (seta que aponta ao nordeste)
•nw-resize (seta que aponta ao noroeste)
•pointer (mão)
•s-resize (seta que aponta para baixo)
•se-resize (seta que aponta para o sudeste)
•sw-resize (seta que aponta para o sudoeste)
•text (I-beam)
•w-resize (seta que aponta à esquerda)
•wait (relógio de areia)
Assim como todas as propriedades da linguagem CSS, é possível definir o objeto aplicando-o a todo o documento ou somente a uma parte do mesmo.

helldanger1 · Mai 19, 2009

A todo o documento:

<html>
<title>Mudar o cursor</title>
<head>
<style type="text/css">

</style>
</head>
<body>
</body>
</html>

A alguns setores do documento:

<html>
<title>Mudar o cursor</title>
<head>
</head>
<body>
<h4 style="cursor: default">default</h4>
<h4 style="cursor: crosshair">crosshair</h4>
<h4 style="cursor: pointer">pointer</h4>
<h4 style="cursor: move">move</h4>
<h4 style="cursor: nw-resize">nw-resize</h4>
<h4 style="cursor: ne-resize">ne-resize</h4>
<h4 style="cursor: n-resize">n-resize</h4>
<h4 style="cursor: e-resize">e-resize</h4>
<h4 style="cursor: help">help</h4>
<h4 style="cursor: text">text</h4>
<h4 style="cursor: wait">wait</h4>
</body>
</html>

helldanger1 · Mai 19, 2009

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

<html>
<title>Mudar o cursor</title>
<head>
<style type="text/css">

</style>
</head>
<body>
</body>
</html>

Mudando o cursor do mouse

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP