Cómo cambiar el cursor por una imagen personalizada

Cómo cambiar el cursor por una imagen personalizadaLa 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 soporta 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.

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

Ver mas ejemplos..


<a onclick=Tutoriales En Linea" class='avatar avatar-64 photo' height='64' width='64'>
  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-08-04
  • Categorias: Diseño Web CSS3 WebSite webmasters Noticias Tutorial



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!