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?

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?

• javascript
• html
• css

Share Improve this question Follow edited May 23, 2017 at 11:43 CommunityBot 111 silver badge asked Jul 11, 2011 at 9:39 GajusGajus 74.1k8080 gold badges297297 silver badges472472 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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 pared 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.