[Html + Css] Modificando O Cursor Do Mouse

[fsg 230]

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.

[Akyrius 0]

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

[123henrique123 2]

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 2]

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.