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:

.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("http://miweb.com/imagenes/mi-cursor.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 soprota url() en la propiedad cursor). Por ejemplo:

.mi-cursor {
    cursor: url("http://miweb.com/imagenes/mi-cursor.png"),
           url("http://miweb.com/imagenes/mi-otro-cursor.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("http://miweb.com/imagenes/mi-cursor.png") 10 15,
           url("http://miweb.com/imagenes/mi-otro-cursor.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.

Ejemplo

Más información

  • Miriam

    Me sirvió mucho! muchas gracias
    ¿De casualidad sabes la manera de introducirlo con javascript?
    intento hacer algo asi: document.getElementById(“myId”).style.cursor = “url(“chrome.png”), pointer;”

    pero no da resultado

    • Tienes mal la sintaxis. Así de primeras, por ejemplo, te sobra un ;

  • Iratxo Dordoka

    Hola
    he llegado a tu web porque necesito ayuda con css

    estoy creando una tienda con un child theme de genesis

    y necesito hacer varias cosas y no consigo encontrar información sobre ello.

    tomando esa tienda como ejeemplo necesito aprender a hacer dos cosas:

    1) hacer fondo entero de menu secundario todo de un color fijo y hacer dibujitos debajo de todo el menu

    y lo mismo en el footer

    2) cuando pase el cursor encima de cada opción del menu, arriba salga el iconito o dibujo que quiero.

    Haber si me puedes ayudar que ya no se ni donde mirar…

    gracias de antemano compañero

    • Buenos días @iratxodordoka:disqus

      Se a la web a la que te referías pero eliminé el enlace, igual que he eliminado el comentario posterior volviendo a poner el enlace. En general, la web en la que estás trabajando es irrelevante. Espero que lo entiendas.

      Dicho esto, parece que no estás buscando bien la información. Nota que este post es sobre cambiar el cursor por una imagen personalizada, no que salga una imagen en algún sitio al pasar el ratón por encima de un elemento. En tu caso el cursor no se ve afectado. Busca sobre el selector CSS :hover.

    • Iratxo Dordoka

      gracias por la respuesta

      ahora lo mirare

      y la otra cuestion hacer color de fondo de menu con dibujos arriba o abajo?