[Html + Css] Modificando O Cursor Do Mouse

fsg
Por fsg
em Tutoriais de Websites

fsg

Felipe Sartori
avatar
Infante
Infante

INFOS

Grupo: InfanteRegistrado: 16/05/10Posts: 1510Char no Tibia: Alia Dori

Oii XTibianos, ontem não tive tempo de postar um tutorial, então hoje eu vou postar um mini tutorial. O tutorial é bem simples, então chega de falar e vamos...

 

Nós podemos alterar o cursor do mouse do visitante de um site quando ele fica sobre uma determinada palavra, utilizando a propriedade cursor.

 

No exemplo abaixo, nós 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 você quiser que a descrição apareça quando o cursor ficar em cima da palavra, basta inserir o "title" em sua linha de código.

 

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;}

 

Com isto, você vai conseguir fazer com que apareça a descrição de seu item e que o cursor do ponteiro mude.

Existem outros tipos de ponteiro, 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.

 

Fonte:

Clique aqui

 

Espero que gostem :smile_positivo:

Abraços.

Guarani da minha vida, a razão do meu viver, se ele jogasse lá no céu eu morreria só pra te ver! 1911 - 2015 ♥ 

Akyrius

avatar
Campones
Campones

INFOS

Grupo: CamponesRegistrado: 15/03/09Posts: 22Char no Tibia: Nem 1

sei la nao entendi , haha ,sou meio noob em progamaçao mas eu estava atras de cursores ,que sao red skulls é black skulls ,saqualé? ;]

God_of_War_3_Wallpaper_by_dzilo.jpg

123henrique123

avatar
Campones
Campones

INFOS

Grupo: CamponesRegistrado: 10/10/10Posts: 26

tipo isso ai n eh akeles troço q qnd vc abre o site, a seta do mouse eh uma skull ou outra coisa neh? ou o nome do ot rodando num circulo? se n for, vc sabe fazer akilo? '-'

Hiagante

(-_-)
avatar
Cavaleiro
Cavaleiro

INFOS

Grupo: CavaleiroRegistrado: 15/12/05Posts: 170Char no Tibia: Knight'See

no HTML: <div id="tenso">Olá eu tenho meu nick é Hiagante</div>

 

no CSS: #tenso {cursos: pointer;}

 

ao passar com o mouse na div "tenso", o mouse vai ficar com aquela seta de link,a maozinha.

sem mais.