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:

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

Can anyone help me with this?

Answer 1

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'
    });
});