Inicia sesión


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..


  • 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!






Efectos jQuery - Ocultar y mostrar

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Como abrir un enlace con jQuery

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Cómo rastrear a los usuarios de Adblock usando Google Analytics

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google WebSite Trucos y tips Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial