Linea de Codigo

Mediante CSS podemos modificar el comportamiento del cursor. De una forma básica mediante las las opciones básicas que nos ofrece CSS para cursores o bien indicando un cursor personalizado.

Lo primero será hacernos con un cursor. Estos archivos tienen la extensión .cur. Si bien, la especificación CSS no entra a especificar el formato del cursor. Incluso indica que podría ser un formato SVG.

Una vez que tengamos el cursor en una URL accesible desde la página, procedemos a personalizar el cursor en nuestra página.

Para ello tendremos que utilizar la propiedad cursor y como valor, mediante la función url(), indicarle la URL donde está el cursor.

cursor:url("micursor.cur");

Esta propiedad se la podremos asignar al elemento de la página donde queremos que aparezca el cursor. Puede ser sobre un enlace (A), sobre toda la página (BODY),... En el caso de que sea sobre toda la página, el código sería el siguiente:

 
<style type="text/css">
body{
  cursor:url("micursor.cur");
}
</style>
 

Después del cursor es una buena práctica el que se indique un cursor de los básicos, para que, en caso de haber problemas con la carga del cursor personalizado, pueda aparecer un cursor.

 
<style type="text/css">
body{
  cursor:url("micursor.cur"),crosshair;
}
</style>
 

En este caso hemos indicado el cursor "crosshair" por defecto.

Algunos navegadores no cargar en cursor personalizado si no se ha indicado el cursor por defecto. Así que es bueno seguir esta práctica.