Enlargement of the mouse cursor

Question

Are there any tips available for me to enlarge my mouse cursor while hovering over some particular object ? (Sorry I am quite low with markup languages and stylesheet, please offer advice, hints and constructive information then feel free to downvote me :-( if you wish )

Closely related: http://stackoverflow.com/questions/6648279/cursor-256x256-px-size — Pekka, Aug 15 '11 at 14:40
Do you want to enlarge the **cursor**, or the element **underneath** the cursor? The "cursor" is the little arrow on the screen. Do you want a bigger arrow, or do you want the stuff on the page that the arrow points to to get bigger? — Pointy, Aug 15 '11 at 14:52

score 1 · Answer 1 · answered Aug 15 '11 at 14:42

1

You should be able to find what your after using the CSS cursor property:

http://www.w3schools.com/cssref/pr_class_cursor.asp

I do not believe you can resize the cursor per-say, as the browser is in control of the cursor. However you can specify your own image as the cursor via "url":

http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=url%28smiley.gif%29,url%28myBall.cur%29,auto

(you may need to create a javascript workaround for old browsers that don't support URL):

answered Aug 15 '11 at 14:42

Alex KeySmith

16,657
11
74
152

Thanks, but that completely changes my cursor. I need a enlarge what is underneath my mouse. – Aussay Marshal Aug 15 '11 at 14:47
Click the link - w3schools has some accuracy problems. – Pointy Aug 15 '11 at 14:50

Pointy · Answer 2 · 2011-08-15T14:51:18.537

1

There's no way to tell the browser (or, at least, no cross-browser way) to simply make its cursor bigger. You can, however, use your own image for a cursor:

.your-class:hover { cursor: url(/img/your_cursor.png), pointer; }

According to the Mozilla docs, it's supported by most browsers nowadays.

edited Aug 15 '11 at 14:51

answered Aug 15 '11 at 14:43

Pointy

405,095
59
585
614

Thanks, I wish to draw a circle or a rectangle that is transparent to the background. Would you please help me ? – Aussay Marshal Aug 15 '11 at 14:45
1

@Serious do you need help with implementing the CSS, or drawing the image? – Pekka Aug 15 '11 at 14:47

score 1 · Answer 3 · answered Aug 15 '11 at 14:44

The actual appearance of the mouse cursor depends on the browser and OS configuration, there is no way to alter the default ones.

You can however, attach you custom image with the cursor (this is less than ideal but the only workaround IMO)

.customCursor { cursor: url(cursor.cur),default; }

In the above example, you're telling the browser to use your custom cursor, if not fallback to default one.

Enlargement of the mouse cursor

3 Answers3