Custom large mouse cursor with javascript

Question

I want to create custom cursor image, but it is limited to 32x32, while I need about 300x300 image. So it seems that I need to hide cursor cursor: none and create custom large div or image, that will be moving with invisible mouse.

The simplest implementation could be:

$(document).on('mousemove', function(e){
     $('#custom-cursor').css({
          left:  e.pageX,
          top:   e.pageY
     });
});

but I have some problems:

Performance (how should I implement moving div not with left-top properties)
Text selection jsfiddle cannot select text properly

Can anyone help me with this?

I'm curious about your #1 -- have you had some performance issue with it? That would surprise me. — T.J. Crowder
– T.J. Crowder, Commented May 21, 2014 at 13:44
@T.J.Crowder probably i want using css transforms instead of changing left-top... or some javascript implementations such as VelocityJS or GSAP — vedmaque
– vedmaque, Commented May 21, 2014 at 14:58

A. Wolff · Accepted Answer · 2014-05-21 13:47:06Z

2

On modern browsers, you need to use pointer-event CSS property set to none:

--DEMO--

$(document).on('mousemove', function (e) {
    $('#custom-cursor').css({
        left: e.pageX,
        top: e.pageY,
        pointerEvents: 'none'
    });
});

edited May 21, 2014 at 13:47

answered May 21, 2014 at 13:39

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

T.J. Crowder Over a year ago

We're talking really modern, not even IE9 or IE10 support this, you need IE11 (in the IE line) to get pointer-events.

A. Wolff Over a year ago

@T.J.Crowder Thx for the feedback, i wasn't sure which IE version support it, was thinking about IE9< to not support it, damn IE... Anyway, i'm not sure we can call IE11 a modern browser though

vedmaque Over a year ago

thank you! this is what i was looking for. did my problem with selection happen because cursor was selecting image/div?

Donngal · Accepted Answer · 2014-05-21 14:05:00Z

0

If Cursor and Text are in the same Color, add z-index: -1 to the cursor. So the cursor is behind the text and lets you select it.

But if the color is not equal the user will see, that the cursor is behind the text.

answered May 21, 2014 at 14:05

Donngal

11 bronze badge

1 Comment

vedmaque Over a year ago

interesting trick, but text-selection color laying over image.

Collectives™ on Stack Overflow

Custom large mouse cursor with javascript

2 Answers 2

--DEMO--

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related