22 de novembro de 2009

CSS Tutorial - Modificando o cursor do mouse



Podemos modificar o cursor do mouse quando ele fica sobre uma determinada palavra com a propriedade cursor.
Como exemplo, vamos aplicar essa propriedade na tag <abbr>:

O <abbr title="browser da Mozilla">Firefox</abbr> é um browser.
A empresa <abbr>Google<abbr> tem crescido muito.

Se quiser que a descrição apareça quando cursor do mouse ficar em cima da palavra, basta inserir o "title" na tag.

A empresa <abbr title="Uma empresa">Google<abbr> tem
crescido muito.

Esse é o CSS para a tag <abbr>, adicionamos também a propriedade border-bottom para destacar a palavra:

abbr {cursor:help; border-bottom:dashed 1px #008cff;}

Vai ficar assim (mantenha o mouse em cima da palavra "Google" e "Firefox" para ver o resultado):

O Firefox é um browser.
A empresa Google tem crescido muito.

Não existe só o ponteiro com o "?", existem outros modelos, basta adicionar o respectivo valor na propriedade cursor, veja:

cursor:help; -> Um ponto de exclamação "?" junto como o cursor.
cursor:wait; -> Uma apulheta no lugar do cursor.
cursor:progress; -> Uma apulheta junto com o cursor.
cursor:crosshair; -> Uma cruz no lugar do cursor.
cursor:move; -> Ponteiro que indica que algo pode se mover.
cursor:pointer; -> A clássica "mãozinha" no lugar do cursor.
cursor:n-resize; -> Cursor de duas pontas na vertical.
cursor:e-resize; -> Cursor de duas pontas na horizontal.
cursor:sw-resize; -> Cursor de duas pontas inclinado para a direita.
cursor:nw-resize; -> Cursor de duas pontas inclinado para a esquerda.

Enjoy ;)

2 comentários:

  1. Muito bom o post, pra mim chegou um pouco atrasado pois pesquisei esses dias sobre isso, porem quem quiser usar uma imagem no cursor tá ai uma dica:
    http://www.cursors-4u.com

    ou você mesmo pode criar a partir de imagens

    ResponderExcluir
  2. Legal André, mais informação é sempre bom ;D !

    ResponderExcluir