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

Answer 2

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.