Place image as pointer

Navigation
4

Good, I've been changing the pointer for other styles like "wait", "crooshair", etc. However I am unable to change the cursor for any image I have on the 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");
}

PS: I do not put the exact location of the image since the html document, css and this image are in the same folder. I also put the complete address and it did not work.

    
asked by Vendetta 11.08.2017 в 13:23
source

2 answers

8

Two notes, the limitations of the image size are 128x128 although it is recommended to use a maximum of 32x32 for compatibility with the rest of OS and browsers.

All taken from the firefox documentation ( in Spanish ):

  

That is, you can enter zero or more URLs (separated by   commas), which must be followed by one of the generic cursors   defined in the specification, eg. auto , help or pointer .

You have to add the auto at the end, or any way you want for the case in which the browser does not support the option 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>
    
answered by 11.08.2017 / 13:41
source
3

Always indicate a generic cursor, if you do not want to put a specific one you can put auto . Example: 

#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>
    
answered by 11.08.2017 в 13:40
Doubt about the "return" statement in recursion - C Get the value of an element "a" from jQuery