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
<span>
envolvendo o local onde o cursor vai ser modificado:
<p>
Neste parágrafo,
<span>
aqui neste trecho
<span>
o cursor mudou!
</p>
E a aplicação do estilo inline no elemento
<span>
Neste parágrafo,
<span style="cursor: help">
aqui neste trecho
</span>
o cursor mudou!
</p>
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
<body>
- a página web) como mostrado no exemplo abaixo:
<body style="cursor: wait">
0 comentários:
Postar um comentário