CODEWITHSUNDEEP
javascriptjquerycssmouse-cursor
vedmaque
vedmaque

Reputation: 323

Custom large mouse cursor with javascript

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?

Upvotes: 3

Views: 1942

Answers (2)

Donngal
Donngal

Reputation: 1

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.

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

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

Upvotes: 2

Related Questions