Cambiar la apariencia del cursor con CSS
Podemos modificar la apariencia del cursor cuando éste se desplaza sobre un vínculo, texto, imágen ... integrando el atributo <style> en la etiqueta del componente.<A HREF="www.arc3d.net" style="cursor:hand">
Estos son los diferentes tipos de cursores que se pueden utilizar:
default (flecha)
crosshair (cruz)
e-resize (flecha que apunta a la derecha)
hand (mano)
help (signo de pregunta)
move (cruz con flechas en los extremos)
n-resize (flecha que apunta hacia arriba)
ne-resize (flecha que apunta al noreste)
nw-resize (flecha que apunta al noroeste)
pointer (mano)
s-resize (flecha que apunta hacia abajo)
se-resize (flecha que apunta hacia el sudeste)
sw-resize (flecha que apunta hacia el sudoeste)
text (I-beam)
w-resize (flecha que apunta a la izquierda)
wait (reloj de arena)
Igual que con todas las propiedades CSS, es posible definir el objeto aplicándolo a todo el documento o solo a una parte del mismo.
A todo el documento
<html>
<title>Cambio de cursor</title>
<head>
<style type="text/css">
<!--
body {cursor: hand}
-->
</style>
</head>
<body>
Hola mundo!
</body>
</html>
A partes del documento
<html>
<title>Cambio de cursor</title>
<head>
</style>
</head>
<body>
<A HREF="www.arc3d.net" style="cursor:hand">Arc 3D</a>
</body>
</html>
Usar un cursor presonalizado
<html>
<title>Cambio de cursor</title>
<head>
<style type="text/css">
<!--
body {cursor : url("salta.cur")}
-->
</style>
</head>
<body>
Hola mundo!
</body>
</html>