Adicionar a Meu favorito

Thursday, 25 de March de 2004

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

Introdução
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 :-)

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.

wait
crosshair
n-resize
se-resize
help
text
ne-resize
sw-resize
pointer
move
nw-resize
e-resize
default
w-resize
s-resize

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

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 trecho o cursor mudou!

E a seguir a regra CSS em ação!
Passe o mouse sobre "aqui neste trecho".
Neste parágrafo, aqui neste trecho o cursor mudou!

A regra CSS para modificar o cursor em toda a página
Para modificar o cursor na página aplicamos a regra CSS do cursor na tag do documento todo ( a tag - 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! :-)

Considerações finais
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.

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

Maurício Samy Silva
www.maujor.com
Um site dedicado as CSS

Outros artigos

Assine o Feed desta categoria

• Uma visão geral das CSS - 05/03/2004
• CSS - Folhas de estilo em cascata - 16/02/2004
• Sintaxe das regras CSS - 15/02/2004
• Agrupamento de seletores CSS - 15/02/2004
• Ver mais...

Comentários do artigo [Novo comentário]