CODEWITHSUNDEEP
htmlcsscursor
Rob
Rob

Reputation: 1495

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

Upvotes: 0

Views: 53

Answers (2)

Tyr
Tyr

Reputation: 2810

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

Upvotes: 1

jk777
jk777

Reputation: 3

I tried your pen using this link and... it worked! Not sure why it doesn't with yours though...

Upvotes: 0

Related Questions