0

I have tried all the solutions on SO but did not succeed. I have an image to be appear as a cursor on my image. I have tried all of these. 

img:hover{
  cursor: url(../images/wand.ico), auto;
}

img{
  cursor: url(../images/wand.ico), auto;
}

Not with the .ico but with the .png too. In both cases these are not working. I have read this case. But doing so did not help. Resize the image but still cusror is not working. Any body can help me in this regard?. I did not have that much knowledge but i searched and researched almost every solution.

fat potato
  • 503
  • 1
  • 9
  • 29
  • Is the custom cursor not working on `img` elements ONLY or is it not working on ALL elements? If it's the latter, have you double-checked your filepath to verify that it is pointing to where you've uploaded the image to the server? – UncaughtTypeError Oct 13 '17 at 13:33
  • on all the tags i have tried it on the `` tag too. – fat potato Oct 13 '17 at 13:35
  • Ok, so the custom cursor doesn't work at all. Is your file path, for the image of the custom cursor, correct? – UncaughtTypeError Oct 13 '17 at 13:36
  • yeah it is correct it pointing right in the phpstorm by clicking on it it redirect me to it. On the chrome if i copy paste the path into browser window it shows me the image. – fat potato Oct 13 '17 at 13:38
  • Ok, another indication of a 404 filepath would be an error in the console or network panel, and if you are not seeing any of those at anytime, then the filepath should be correct. What happens when you apply the following rule to your use-case? `img { cursor: url(https://www.gravatar.com/avatar/c29ec48…?s=32&d=identicon&r=PG&f=1), auto; }` – UncaughtTypeError Oct 13 '17 at 13:44

1 Answers1

0

You need to set some other properties in your CSS.

img {
  cursor: url(../images/wand.ico), auto;
  // set the width and height to the size of the png/ico
  width: 20px;
  height: 20px;
  // Set the display type
  display: block;
}

Give that a try. I believe it's not working as the image has no dimensions, therefore, it's invisible.

Josh
  • 56
  • 1
  • 10
  • thank you for your answer but this is not the case. i did not want all the images to be have width of 20 px. – fat potato Oct 13 '17 at 13:59
  • No, set the width to the size of the image like I said in the post. Also, if you do not want 'all' images to have a set width and height be more specific with your selectors. – Josh Oct 13 '17 at 14:00