Search code examples
htmlcsscursor

CSS cursor image bizarre issue

Am I missing something very obvious here? I'm trying to replace the cursor css property with a png as demonstrated here

I have it working with the demo 'happy.png' but can't understand why its not working with my 'call-me-hand.png'

.next {
   cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto;
   cursor: url("https://robcleaton.github.io/warface/assets/images/call-me-hand.png"), auto;
}

CodePen

Solution

  • The cursor property has limits on the url value based on Browsers and OS. For example, Images larger than 128 x 128 Pixels aren't supported on Firefox. To make it work, reduce the dimensions of the given image.

    Further information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property