Place image as pointer


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.


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


#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

2 answers


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(""), auto;

label:hover {
  cursor: url("");
<label>No funciona</label>
answered by 11.08.2017 / 13:41

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

  cursor: url(""), 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