0

Specifically I have an html5 canvas and I am trying to change the cursor image to a custom image on mouseover over the element, but it's not working. I put it in the CSS that cursor:url, url, default for the element with the particular ID. The last tag "default" works because when I changed from default to all-scroll it changed. When I checked Network in console it's loading in the file I want to change the cursor to, too.

Any suggestions?

CSS: 

#sketchpad {
  border: #cec0fc 3px solid;
  background: white;
  cursor: url("../images/you/brush.png"), url("/gentle_mollusc/assets/images/you/brush.png"), default;
}

HTML:

<!-- drawing pad goes here -->
<canvas id="sketchpad"></canvas>
Monica
  • 47
  • 7

1 Answers1

1

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

Priyank Trivedi
  • 286
  • 2
  • 12