Modificando o cursor com CSS

Este artigo tem por objetivo mostrar a regra CSS para mudança do aspecto do cursor.

<b><U>Introdução</U></b>
Você com certeza já notou que quando passa-se o mouse sobre um link o cursor transforma-se de seu aspecto default (uma "setinha"), para um "mãozinha".
E, já deve também ter notado uma transformação para um "I" quando o mouse está sobre um texto.
Com a utilização das CSS pode-se modificar o aspecto do cursor do mouse na tela do usuário quando ele navega no seu site.
A mudança pode ser feita tanto para toda a página web navegada, quanto para qualquer elemento HTML.
Com CSS é possível determinar qual o aspecto o cursor assumirá, dentre aqueles escolhido de uma lista permitida, que veremos a seguir.
Inclusive mudar o aspecto da "mãozinha" em links, o que aliás não é recomendado :-)

<b><U>Os valores CSS para o cursor</U></b>
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.

<b><span style="cursor:wait"wait>wait</b>
<b><span style="cursor:crosshair">crosshair</b>
<b><span style="cursor:n-resize">n-resize</b>
<b><span style="cursor:se-resize">se-resize</b>
<b><span style="cursor:help">help</b>
<b><span style="cursor:text">text</b>
<b><span style="cursor:ne-resize">ne-resize</b>
<b><span style="cursor:sw-resize">sw-resize</b>
<b><span style="cursor:pointer">pointer</b>
<b><span style="cursor:move">move</b>
<b><span style="cursor:nw-resize">nw-resize</b>
<b><span style="cursor:e-resize">e-resize</b> </b>
<b><span style="cursor:default">default</b>
<b><span style="cursor:w-resize">w-resize</b>
<b><span style="cursor:s-resize">s-resize</b>

<b><U>A regra CSS para modificar o cursor em um elemento HTML</U></b>
Para exemplificar a regra, vamos supor um parágrafo com a seguinte frase:
<i> Neste parágrafo, aqui neste trecho o cursor mudou!</i>

E, vamos mudar o aspecto do cursor quando o mouse passar sobre "aqui neste trecho".

O HTML da frase, com a tag envolvendo o local onde o cursor vai ser modificado:
Neste parágrafo, aqui neste trecho o cursor mudou!

E a aplicação do estilo inline no elemento
Neste parágrafo, aqui neste trechoo cursor mudou!

E a seguir a regra CSS em ação!
Passe o mouse sobre "aqui neste trecho".
<i><b>Neste parágrafo, <span style="cursor:help">aqui neste trecho</span> o cursor mudou!</b></i>

<b><U>A regra CSS para modificar o cursor em toda a página</U></b>
Para modificar o cursor na página aplicamos a regra CSS do cursor na tag do documento todo ( a tag <i></i> - a página web) como mostrado no exemplo abaixo:

E o visitante ficará "perdido" na sua página pensando
que há algo carregando que não acaba nunca! :-)

<b><U>Considerações finais</U></b>
Mostrei neste artigo como modificar o aspecto do cursor do mouse.
Você pode fazer a modificação para qualquer elemento HTML ou até mesmo para a página toda.

<b><U>DICAS</U></b>
<B>Dica 1: </B>
Cuidado ao modificar o cursor. Use esta regra com bom senso para não confundir o visitante;
<b>Dica 2:</b>
O cursor "help" é um bom uso para links que remetem a textos de ajuda ou esclarecimentos.

Maurício Samy Silva
<a href=" http://codigofonte.net/to.cgi?http://www.maujor.com" target="_blank" title="Um site dedicado as CSS">www.maujor.com</a>
Um site dedicado as CSS