4

Buenas, he estado cambiando el puntero por otros estilos como "wait", "crooshair", etc. No obstante soy incapaz de cambiar el cursor por alguna imagen que tengo el el pc.

HTML

<html>
<head>
 <script src="DH18.js"></script>
 <link rel="StyleSheet" href="DH18.css" type="text/css">
</head>
<body id="body">
</body>
</html>

CSS

#body {
cursor: url("icono.png");
}

PD: No pongo la ubicación concreta de la imagen ya que el documento html, css y dicha imagen se encuentran en la misma carpeta. Igualmente puse la dirección completa y no sirvió.

3
  • ¿Que navegador y sistema operativo usas?
    – user7176
    Commented el 11 ago. 2017 a las 11:28
  • vendeta, body no es un ID(osea sin #), es body {}, no necesitas colocarle ID
    – ESCM
    Commented el 11 ago. 2017 a las 11:28
  • Ya lo puse sin # igualmente no funciona. Navegador: Google Chrome Sistema Operativo: Windows 10 Commented el 11 ago. 2017 a las 11:31

2 respuestas 2

8

Dos apuntes, las limitaciones del tamaño de imagen son de 128x128 aunque se recomienda usar un maximo de 32x32 para compatibilidad con el resto de SO y navegadores.

Todo sacado de la documentacion de firefox (en castellano):

Esto es, se pueden indicar cero o más direcciones URL (separadas por comas), que deben ser seguidas de uno de los cursores genéricos definidos en la especificación, por ej. auto, help o pointer.

Tienes que añadirle el auto al final, o cualquier modo que deseas para el caso en el que el navegador no soporte la opción url

p:hover {
  cursor: url("https://www.aciprensa.com/icons/32x32/mail.png"), auto;
}

label:hover {
  cursor: url("https://www.aciprensa.com/icons/32x32/mail.png");
}
<p>Funciona</p>
<label>No funciona</label>

4
  • Hola @Hictus. Gracias por tu respuesta. Te recomendaría que la próxima vez mantuvieras en tu respuesta la parte más relevante de los enlaces que proporcionas. Nunca se sabe cuándo pueden dejar de funcionar éstos. Gracias de nuevo. Commented el 11 ago. 2017 a las 11:48
  • Hola @OscarGarcia, muchas gracias por la edición, podrías indicarme como puedo poner el código ejecutable así por favor? No encuentro donde explican como hacerlo... Gracias de antemano!
    – Hictus
    Commented el 11 ago. 2017 a las 11:50
  • Por supuesto @Hictus. En tu editor verás un icono (a la derecha del de insertar imagen) que se describe como "fragmento HTML/JavaScript/CSS". Al pulsarlo te saldrá un editor y en la vista preliminar verás un enlace para "editar este fragmento de código". Commented el 11 ago. 2017 a las 11:52
  • 1
    @OscarGarcia Buuuua, mas cerca y me lo como, muchísimas gracias señor, se acabaron los enlaces a jsfiddle, yuhuu!
    – Hictus
    Commented el 11 ago. 2017 a las 11:55
3

Hay que indicar siempre un cursor genérico, si no quieres poner uno específico puedes poner auto. Ejemplo:

#prueba{
  cursor: url("https://image.freepik.com/iconos-gratis/inicio-icono-silueta_318-85097.jpg"), auto;
}
<div id="prueba">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati dolorem explicabo nulla ex molestias! Ad doloremque maxime placeat cupiditate unde explicabo quibusdam repudiandae eaque inventore mollitia, reprehenderit sequi neque in?</div>

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.