5

I've got stuck with trying to create a custom cursor. The main problem is the cursor size – 256x256px PNG (transparent) image. The problem arises from various limitations, browser and OS. ( my previous question explains why CSS cursor {} won't work stackoverflow )

So, what are the alternatives to CSS to have a custom cursor?

Community
  • 1
  • 1
Gajus
  • 69,002
  • 70
  • 275
  • 438

1 Answers1

5

As you already know, you cannot have a custom cursor that big: Windows has a limitation of 32x32 pixels.

If you want bigger than that, you'll need to use a DOM element containing your cursor image, and get it to follow the cursor.

It's relatively straightforward (especially if you do it with JQuery).

There's a discussion of how to do it here: jQuery - Follow the cursor with a DIV and How do you make a picture follow your mouse pointer with jquery?

However, please note that there will be limitations to this approach compared with having a real cursor.

The two issues I can think of straight away are:

  • The animation may not react as quickly as your actual cursor movements, resulting in a possible lagging effect.

  • and you may have issues when you hit the edge of the browser window. On the left and top edges, it's easy to just move the cursor image partially over the edge, but on the right and bottom, doing that could cause the browser to think the page size has changed, and to generate unwanted scroll bars.

Community
  • 1
  • 1
Spudley
  • 166,037
  • 39
  • 233
  • 307
  • I've considered using DOM for this. The issues that you've outlined are nothing serious. The biggest problem that I've encounter is that the page I am working on has drag functionality. Thus, when you try to drag an element, browser assumes that you are dragging the cursor image as well. I didn't manage to solve this. – Gajus Jul 11 '11 at 10:50
  • 1
    Another limitation to using a DOM element is mouse events. Since your mouse is technically hovering over the DOM element, things underneath don't get registered as moused over etc. On non-IE browsers now, you can use CSS style 'pointer-events' to fix this, but IE currently has no easy way of doing this. – Lochemage Jun 10 '13 at 22:25
  • @Lochemage, Since we know the size we want (256x256) it's possible to calculate it ourself whether there's a mouseover or not. – Pacerier Feb 27 '15 at 15:28