(No Ratings Yet)
Loading ...
|
Estava trabalhando em meu novo portfolio online e surgiu a necessidade de trocar a figura do cursor do mouse quando o usuário apontasse para determinadas imagens. Descobri que é muito fácil fazer isso utilizando CSS e é o que veremos neste tutorial. |
 |
O cursor do mouse é definido pela propriedade cursor: do CSS. Como toda tag CSS, você pode colocar o código direto na tag HTML (Exemplo 1) ou dentro do próprio CSS (Exemplo 2).
Exemplo 1:
Colocando o código CSS dentro da tag do botão ok:
<input type="submit" name="OK" value="OK" style="cursor:crosshair;"/>
Exemplo 2:
Colocando o código CSS dentro da tag <style>:
<html>
<head>
<style type="text/css">
#btnOK{
cursor: pointer;
}
</style>
</head>
<body>
<input type="submit" name="OK" value="OK" id="btnOK"/>
</body>
</html>
Abaixo seguem duas tabelas com os valores que você pode utilizar para trocar o cursor do mouse:
|
auto |
crosshair |
default |
pointer |
|
help |
move |
text |
wait |
|
nw-resize |
n-resize |
ne-resize |
|
w-resize |
hand |
e-resize |
|
sw-resize |
s-resize |
se-resize |
Sobre o autor
Tiago Pimentel
Estudei design gráfico na EPA e por uma ironia do destino, me tornei diretor de arte digital. Também sou ilustrador e músico, trabalho na Jazz Digital e sou adicto a links interessantes e todas as coisas boas da vida: fotografia, moda, cinema, viagens, arte, cultura, internet. Além disso dedico meu tempo livre às artes plásticas. Entre em contatos através das redes sociais, Facebook, Twitter, etc. Os links estão no MeAdiciona: www.meadiciona.com.br/tiagopimentel
Você também deve curtir:
 |
 |
 |
 |
3 Respostaspara ““Tutorial: Mudando o cursor do mouse com CSS”
Deixe uma resposta
parceiros
Valeu cara,ajudou muito mesmoo! =D
muito bom cara.
Eu que agradeço os comentários. Fico feliz que tenha ajudado.
[ ]s