29

I am trying to create a custom cursor using the following image:

http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png

The image size must be retained. I've tried simply to use body { cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'); }, though that doesn't work in FF/Chrome. (not even checking other browsers)

What's the reason for it not working?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Gajus
  • 69,002
  • 70
  • 275
  • 438

4 Answers4

47

The problem is not just with your css code lacking second argument but with the image file.

If you simply resize, make it smaller (i tried 32px for testing purposes) it works like a charm.

You might also want "pointer" rather than auto, judging by the look of the image;

cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), pointer;

EDIT: i realize now you wanted to keep the size but it just won't work. see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property for more info

xec
  • 17,349
  • 3
  • 46
  • 54
22

Firefox requires a second non-url argument such as

cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), auto;

There is a great reference at Quirksmode CSS2 - Cursor Styles

detaylor
  • 7,112
  • 1
  • 27
  • 46
  • I should have mentioned, but I've tried that as well and it doesn't work. Demo is available http://anuary.com/dev/hp/pad3/. – Gajus Jul 08 '11 at 11:44
  • 2
    Which version of FireFox are you using? It works fine for me - assuming that you should see a giant hand when you hover over the black box. The Quirksmode article mentions that the image should be smaller than 32x32px which the one in the demo doesn't seem to be. – detaylor Jul 08 '11 at 12:14
  • 1
    @Guy: Works all right in FF5; doesn't work in Opera 11 or IE8 (I get the normal "pointer" cursor). Note that the mouse position is at cursor coordinates (0,0) - i.e. tens of pixels to the left of the "index finger"; unless your click targets are commensurate with the cursor's size, this will have your users misclick a lot ("that finger points *there*, yet it clicks *over there*, is my mouse broken?"). – Piskvor left the building Jul 11 '11 at 09:55
  • 6
    Chrome seems to require this as well – dlchambers May 31 '12 at 16:13
3

The reason this is not working is maybe that you're doing this: cursor:url(https://example.com/example.png) You have to add , auto after the statement. Therefore, this is what you are looking for. cursor:url(https://example.com/example.png),auto; Here's the clippet.

button {cursor:url("data:image/x-icon;base64,AAACAAEAICAAAAAAAACoCAAAFgAAACgAAAAgAAAAQAAAAAEACAAAAAAAAAQAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAP8IAP8RAAAA/+YABP8AAAD/iAAAav8AAP+3AACi/wALCxIAAHP/APL/AAAA6v8AALv/AACV/wDQ/wAAAP8RAAD/9wAAe/8AACb/AABV/wAAAP8A/8gAAP/3AAAA+/8AAP8aAF7/AAAA/1EA/wCzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABUcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAFQAAAA4AAAAAAAAVABgAAAAAAAAAAAAAAAAAAAAAAAAGEQAADAAJAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAABEEAAAZAAkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAsACQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVAAAcCQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABMAAAkAAAAJCQkJAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAACQAACQAAAAAAAAAcAAAAAAAAAAAAAAAAAAAAAAAKAAAACQkcAgsZDA4VABUAAAAAAAAAAAAAAAAAAAAAAA0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBRsBGg8WAAAEEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABBEGFQAAAAAAAAAAAAAAAAAAAAAVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxAXAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////////////////////////////////////////////////8/////H////w////cPH//zDg//8Q5P//AOD//wDx//8A////AP///wH///8DgH//AwA//wAAH/4AAB/+AAf//AAD//wAAf/4AAD/+Af///Af///wf///8f////"),auto;}
<button>Hover over me!</button>
Is this what you looked for?
Octavium - The HTML Helper
  • 41
  • 1
0

The reason your custom cursor isn't working in Firefox and Chrome is likely due to the cross-origin policy of the browser. Browsers have security restrictions when it comes to using external resources as custom cursors to prevent potential misuse and protect user privacy.

When you use the cursor CSS property with a URL, the browser treats it as an external resource and may block it from being used as a cursor if it doesn't comply with the same-origin policy. Essentially, the cursor image must be hosted on the same domain as the web page for it to work in modern browsers.

In your case, the image URL you provided (http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png) seems to be hosted on a different domain (anuary.com) than your web page. As a result, the browser is blocking the use of the image as a custom cursor.

To make it work, you have two options:

  1. Host the image on the same domain: Upload the hand-cursor.png image to your own server and update the URL in your CSS accordingly. This way, the image will be served from the same origin as your web page, and the cross-origin policy won't be violated.

  2. Base64 encode the image: Convert the image to a data URL using Base64 encoding and use that data URL directly in your CSS. This method embeds the image data into the CSS, making it work regardless of the origin. Here's how you can do it:

    • Use an online tool to convert the image to a Base64 data URL.
    • Update your CSS to use the Base64 data URL:
    body {
  cursor: url('data:image/png;base64,PUT_YOUR_BASE64_ENCODED_IMAGE_HERE');
}

    Replace PUT_YOUR_BASE64_ENCODED_IMAGE_HERE with the actual Base64 encoded image data.

Keep in mind that using Base64 encoded images in CSS may increase the CSS file size, so be cautious when using this approach for large images. Also, note that some older versions of Internet Explorer may not support this method, but it should work fine in modern versions of major browsers like Firefox and Chrome.

Samuel Getachew
  • 1
  • 1