Con CSS2 podemos determinar la apariencia del cursor cuando este pase por encima de un elemento determinado de nuestra página mediante la declaración cursor: estilo
Por ejemplo, si ponemos el siguiente código:
<p style="cursor: crosshair">
Al pasar por este párrafo el cursor será tipo crosshair.
</p>
Obtendremos el siguiente resultado:
Al pasar por este párrafo el cursor será tipo crosshair.
En la siguiente tabla hay una relación de estilos disponibles.
| auto | Pon aquí el cursor para probar |
crosshair | Pon aquí el cursor para probar |
| default | Pon aquí el cursor para probar |
pointer | Pon aquí el cursor para probar |
| move | Pon aquí el cursor para probar |
e-resize | Pon aquí el cursor para probar |
| ne-resize | Pon aquí el cursor para probar |
nw-resize | Pon aquí el cursor para probar |
| n-resize | Pon aquí el cursor para probar |
se-resize | Pon aquí el cursor para probar |
| sw-resize | Pon aquí el cursor para probar |
w-resize | Pon aquí el cursor para probar |
| s-resize | Pon aquí el cursor para probar |
text | Pon aquí el cursor para probar |
| wait | Pon aquí el cursor para probar |
progress | Pon aquí el cursor para probar |
| help | Pon aquí el cursor para probar |
hand | Pon aquí el cursor para probar |
| not-allowed | Pon aquí el cursor para probar |
no-drop | Pon aquí el cursor para probar |
| vertical-text | Pon aquí el cursor para probar |
all-scroll | Pon aquí el cursor para probar |
| col-resize | Pon aquí el cursor para probar |
row-resize | Pon aquí el cursor para probar |
No todos los estilos están incluidos en las especificaciones de CSS2, pero los navegadores los reconocen. Muchos de los estilos anteriores producen el mismo resultado en algunos navegadores, pero en otros (o en otras versiones) sí que hay diferencias.
La especificación CSS2 tambien contempla el uso de cursores distintos de los proporcionados por el sistema. En este caso debes señalar la URI donde está el gráfico a utilizar:
p { cursor : url("micursor.cur"), url("otro.cur"), text; }
Donde el nombre del fichero que contenga al cursor debe ir sin comillas y text debe ser uno de los estilos disponibles, que será el que se mostrará si no se tiene acceso al fichero. Los tipos de imágenes recomendados son cur y ani. La especificación menciona el tipo csr, no muy extendido.
Por ejemplo, si ponemos:
<p style="cursor:url(blue.cur), auto;">
Al pasar por este párrafo el cursor será
la imagen que hay en el fichero blue.cur.
</p>
Obtendremos el siguiente resultado:
Al pasar por este párrafo el cursor será la imagen que hay en el fichero blue.cur.
Si se usa un fichero con extensión ani, se verá un cursor animado. En la actualidad esto sólo funciona en Explorer. Por ejemplo, poniendo:
<p style="cursor:url(animated.ani), auto;">
Un cursor animado. En Firefox no se ve, pero en Explorer sí.
</p>
Obtendremos el siguiente resultado:
Un cursor animado. En Firefox no se ve, pero en Explorer sí.
Por último, si ponemos:
<p style="cursor:url(animated.ani),url(blue.cur), auto;">
En Firefox se ve una flecha azul.
En Explorer se ve animada.
</p>
Obtendremos el siguiente resultado:
En Firefox se ve una flecha azul. En Explorer se ve animada.