2

Deseo cambiar el cursor de mi pagina web, pero sin éxito.

He buscado, 'cacharreando' y esto es lo que hice en la sección de css:

body {
  background: url(https://pm1.narvii.com/6889/d2d9b7ffb36fafc8030e94c2f920cada3b84e870r1-1200-675v2_hq.jpg) no-repeat center center fixed;
  background-size: cover;
  cursor: url(http://www.rw-designer.com/cursor-extern.php?id=89747), url(http://www.rw-designer.com/cursor-extern.php?id=89747), default;
  cursor: url(http://www.rw-designer.com/cursor-extern.php?id=89747) 5 10, url(http://www.rw-designer.com/cursor-extern.php?id=89747) 5 10, pointer;
  cursor: url(http://www.rw-designer.com/cursor-extern.php?id=89747);
}

Como pueden ver, tiene también un fondo personalizado. El fondo funciona a la perfección, sin embargo, el cursor no me funciona. No se personaliza :(. Necesito al menos el puntero por defecto, la animación del dragoncito o un tipo ani, o cur de un dragón.... Algo.... He revisado también las preguntas de este sitio y sin suerte :(

Estoy usando XAMMP y he probado con Firefox, Chrome y Opera... Muchas gracias por su atención :D

Pdta, existe la posibilidad de descargarlo y solo llamarlo al directorio pero así no me funciona a la hora de subirlo en un hosting, por eso opto mejor la opcion de llamarlo desde una Url

1
  • 4
    El formato que usas, .ANI es un formato para definir cursores en Windows, no es un formato de imagen que puedas visualizar en la web, el único que soporta .ANI es IE. PD: No somos un foro :) Commented el 2 mar. 2020 a las 14:44

1 respuesta 1

6

Veo varios problemas. El primero de todos, es que estás sobreescribiendo la propiedad cursor varias veces. No sé lo que pretendes con eso, pero al hacerlo va a prevalecer la última de las 3 que tienes, quedando las anteriores anuladas.

Lo segundo que veo es que estás pasándole a cursor la ruta de una imagen en un formato que no soporta (ANI).

Pueden usarse todos los formatos gráficos soportados por Gecko. Por lo tanto puede usar imágenes PNG, JPG, CUR, GIF, etc. Sin embargo, ANI no está soportado. Además, si especifica un GIF animado, el cursor usará el GIF, pero sin animación. Esta limitación podría ser superada en futuras versiones.

Y para finalizar, la imagen que le pases tiene que tener un tamaño inferior a 128x128 (esto último no he podido comprobarlo a ciencia cierta, lo que está claro es que si le pasas una imagen grande se va a ir por el default del segundo parámetro que le pasas a cursor, que en mi caso es pointer)

Te dejo un ejemplo funcional: Enjoy eat

body {
    background: url(https://pm1.narvii.com/6889/d2d9b7ffb36fafc8030e94c2f920cada3b84e870r1-1200-675v2_hq.jpg) no-repeat center center fixed;
    background-size: cover;
    cursor: url(https://www.mcdonalds.es/sites/all/themes/macdo/image/img-logo-footer.png), pointer;
    width: 100%;
    height: 500px;
}

Referencia: https://developer.mozilla.org/es/docs/Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor

9
  • 1
    Como observación, al tener varias imágenes dentro de la propiedad cursor, va a usarse la primera en ser llamada (si es que existe). También, el tamaño máximo (al menos en Gecko y Webkit) para una imagen de cursor es de 128×128px Commented el 2 mar. 2020 a las 14:51
  • 1
    Gracias, las medidas máximas que encontré yo entonces deben de ser erroneas. No obstante edito mi pregunta para dejar el link a modo de referencia.
    – phpMyGuel
    Commented el 2 mar. 2020 a las 14:52
  • 2
    @Marcos Editada la respuesta para completarla con tu sugerencia. Gracias ^^
    – phpMyGuel
    Commented el 2 mar. 2020 a las 15:02
  • 2
    es un poco extraño esto, pero lo del 128px lo encontré en tu mismo enlace, pero en la versión inglesa: developer.mozilla.org/en-US/docs/Web/CSS/… Commented el 2 mar. 2020 a las 15:04
  • Yo añadiría una regla para que el puntero se mantenga en los elementos con :hover, como enlaces: *:hover { cursor: url(https://www.mcdonalds.es/sites/all/themes/macdo/image/img-logo-footer.png), pointer; } Otra cosa que no veo que acabe de funcionar: cuando ejecutas el ejemplo a pantalla completa, la parte inferior de la pantalla, el puntero deja de ser custom. Donde pones la altura, puede funcionar mejor: height: 100vh;
    – Orici
    Commented el 27 mar. 2020 a las 12:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.