Cómo cambiar el cursor por una imagen personalizada

La propiedad CSS cursor especifica el tipo de cursor que se mostrará cuándo se señala un elemento. Se puede especificar directamente mediante el nombre del tipo de cursor que queremos utilizar de entre los tipos de cursores de sistema, por ejemplo, pointer, help, wait o text:

Efectos visuales de cursor del ratón

.pointer {
    cursor: pointer;
}
.help {
    cursor: help;
}
.wait {
    cursor: wait;
}
.text {
    cursor: text;
}

Para cada uno de estos nombres se mostrará la imagen asociada al tipo de cursor según la configuración del sistema o navegador. Además de estos tipos de cursores predeterminados, se puede especificar una imagen personalizada. Para ello simplemente debemos proveer la URL de la imagen utilizando la notación funcional url():

.mi-cursor {
    cursor: url("https://tutorialesenlinea.es/templates/tutorialesenlinea/imagenes/TL.png");
}

Se puede especificar más de un valor separados entre sí por coma y se pueden mezclar URLs y nombres genéricos de punteros. Se utilizará el primer valor que sea válido. Se recomienda que siempre que se especifique una URL, o un set de URLs, se especifique un tipo de cursor genérico al final como fallback en caso de que las URLs no se puedan resolver (imprescindible en Opera ya que este navegador no soporta url() en la propiedad cursor). Por ejemplo:

.mi-cursor {
    cursor: url("https://tutorialesenlinea.es/templates/tutorialesenlinea/imagenes/TL.png"),
           url("https://tutorialesenlinea.es/templates/tutorialesenlinea/imagenes/TL.png"),
           pointer;
}

Posición de la imagen

Cuándo la propiedad cursor se utiliza con una imagen personalizada, se puede especificar la posición en la que debe mostrarse la imagen (opcional). La posición viene determinada por dos coordenadas, x y, que se colocan después de url(). El valor de cada coordenada ha de ser un número entero positivo menor o igual a 32 y sin unidades. Por defecto es 0 0:

.mi-cursor {
    cursor: url("https://tutorialesenlinea.es/templates/tutorialesenlinea/imagenes/TL.png") 10 15,
           url("https://tutorialesenlinea.es/templates/tutorialesenlinea/imagenes/TL.png") 2 24,
           pointer;
}

La posición de la imagen utilizada en el cursor es un API en estado experimental y sólo se recomienda su uso en entornos de desarrollo.

Ver demostración de este tutoriales en linea...

Ver mas ejemplos..