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

Te sugiero seguir leyendo...


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-08-04
  • Categorias: Diseño Web CSS3 WebSite webmasters Noticias Tutorial

Cómo cambiar el cursor por una imagen personalizada
Cómo cambiar el cursor por una imagen personalizada Cómo cambiar el cursor por una imagen personalizada...
Tutoriales en linea




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






Como recuperar archivos borrados

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-03-28
  • Categorias: Windows Software Ordenador Noticias Tutorial Informatica

Como utilizar el FastBoot y el ADB de Android

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-03-28
  • Categorias: Noticias Tutorial Android Desarrolladores java Software Windows

Cómo habilitar TRIM para SSD en Windows

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-03-28
  • Categorias: Microsoft Windows hardware Ordenador Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-17
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial