jquery mousemove() - how to change cursor?

Question

i am using the mousemove() function. I've noticed it changes the mouse cursor to 'move' icon.

Is there a way to replace this with a custom image? i have tried this but it doesn't work.

$("#main").mousemove(function(e) { 
$('#main').css('cursor: url("/wp-content/uploads/2017/05/mouse-icon.png"), auto;');
$('.ms-slide-info ').css('left', e.pageX + 10).css('top', e.pageY + 
5).css('display', 'block');
});

$("#main").mouseout(function() { 
$('.ms-slide-info ').css('display', 'none');
});

Working page here: http://emgs.scrappydog.co.uk

score 1 · Answer 1 · answered May 14 '17 at 09:29

1

I think this will help you

change this

$('#main').css('cursor: url("/wp-content/uploads/2017/05/mouse-icon.png"), auto;');

to

$('#main').css('cursor', 'url("/wp-content/uploads/2017/05/mouse-icon.png"), auto');

answered May 14 '17 at 09:29

alok panda

67
2
8

Thanks, i have tried this but it didn't work. I have updated the URL with these changes. – Martin May 15 '17 at 10:46

score 1 · Answer 2 · answered May 14 '17 at 09:34

you have two errors:

first you do not set the css with jquery correctly. This is how it should look like:

$('#main').css('cursor', 'url("/wp-content/uploads/2017/05/mouse-icon.png"), auto;');

second you set the cursor of #main but there is a more specific element you are hovering and therefore it displays the cursor set with .ms-grab-cursor

Furthermore i do not understand why you want to set the cursor via javascript. why dont you just set it via css by overriding .ms-grab-cursor.

e.g.:

.ms-grab-cursor{
   cursor: url(/wp-content/uploads/2017/05/mouse-icon.png), auto;
}

Thanks, i have tried both of these but it didn't work. I have updated the URL with these changes. I only tried javascript because i thought it was the mousemove() that was creating it. — Martin, May 15 '17 at 10:47

jquery mousemove() - how to change cursor?

2 Answers2