Custom Cursor Image Css

Using external images for CSS custom cursors

It wasn't working because your image was too big - there are restrictions on the image dimensions. In Firefox, for example, the size limit is 128x128px. See this page for more details.

Additionally, you also have to add in auto.

jsFiddle demo here - note that's an actual image, and not a default cursor.

.test {
  background:gray;
  width:200px;
  height:200px;
  cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;
}

<div class="test">TEST</div>

Display custom image as cursor

Probably related to the image size which a bit big. Use a smaller one:

Sample Image

html {
  cursor: url("https://i.stack.imgur.com/wu8CP.png"), auto;
}

Make mouse cursor custom image change onclick

Here you go!
It's quite simple to do:

Just write the cursor property to whatever Selector you want, for the whole WebSite html {...} of course.

html {
  background-color: lightgray;
  cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto;
}

<html>

</html>

CSS change custom cursor image origin (hotspot) to center

One solution would be to move the position of your image to match the mouse pointer

cursor: url(image) [x y|auto];

Doesn't respond to the question but this is working

HTML

div
{
    width: 600px;
    height: 100px;
    background: pink;
    cursor: url(http://placehold.it/50x30) 25 15, auto;
}

custom cursor image not changing for mouseover html5 canvas

There are restrictions on the size and dimensions of the image you can use for custom cursor, the restrictions are browser dependent. (Firefox only allows 128*128px).
Check the following URL:
Using URL values for the cursor property

Please check if the following thread helps you solve your problem or answers your question:
Using external images for CSS custom cursors