Olá! Thursday, 28 de March de 2024.



Dicas CódigoFonte.net
Thursday, 25 de March de 2004

Modificando o cursor com CSS

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

Comentários do artigo [Novo comentário]

Giovane Martins - 02 de March de 2009 - 11:30
como vcs colocaram como faz mural de rekados, queria q ensinassem a fazer css para flogvip e tals...
Um Abra?
;D
Adna Cunha de Lima - 11 de April de 2009 - 10:16
oi gostei da informação, mas eu queria era colocar um efeito diferente no cursor... meu blog tem um lauout de um caderno, queria um efeito que imitasse uma caneta ou algo parecido. Tem como fazer?
Para adicionar um comentário você deve efetuar o login


Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:


CodigoFonte.net » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010