How to change the mouse cursor with javascript without hovering an element?

Question

I know we can use HTMLElement.style.cursor to change a cursor when hovering an element. But can we change the cursor using javascript without the need of mouse hovering anything? Thanks.

This is for a game app on the web/web view

I need a solution that does not depend on the dom

@KimGysen the cursor would be dependent on the dom. for example, if you change the cursor on the current element you are hovering over, you move your mouse and your cursor changes — stevemao
– stevemao, Commented Nov 26, 2014 at 0:47
Yes, but your scripts interact with the browser through the browser's DOM api... I don't think that there is another way to do it afaik, and I don't really think that there is a need to. The proposed solutions should work? — Trace
– Trace, Commented Nov 26, 2014 at 0:51
hence the question... If there is any api/library to interact with the mouse directly it would be great. — stevemao
– stevemao, Commented Nov 26, 2014 at 0:55

dm4web · Accepted Answer · 2014-11-26 04:17:27Z

2

change the cursor for all elements: http://jsfiddle.net/m2rLy13L/1/

$('*').css('cursor','help');

answered Nov 26, 2014 at 4:17

dm4web

4,6521 gold badge17 silver badges20 bronze badges

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

Comments

ymz · Accepted Answer · 2014-11-26 00:49:27Z

1

you can use a div that will wrap the entire document: http://jsfiddle.net/ymzrocks/un8b6rbc/

html:

<div class="frame" style="background:#ababab"></div>
<div class="frame">
content here
</div>

css:

.frame
{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    ;
}

js:

$('div.frame').css('cursor', 'help');

answered Nov 26, 2014 at 0:49

ymz

6,9641 gold badge26 silver badges41 bronze badges

5 Comments

stevemao Over a year ago

Thanks, I prefer not to use a div wrapper as I need to click on the html. I would like to use something like mouse.cursor('crosshair') so its easier and cleaner.

ymz Over a year ago

try fiddle - the wrapper is at the background not at the front.

stevemao Over a year ago

Thanks, but it breaks when there is something in front... jsfiddle.net/m2rLy13L

ymz Over a year ago

i just watch you fiddle and it works. console.log prints to the developer console not to the screen. it is just fine if you don't like my solution, but when you say that it breaks it may confuse other users

stevemao Over a year ago

Sorry, I meant the mouse cursor changes in front of the button. the button itself works fine.

stevemao · Accepted Answer · 2014-11-26 01:16:50Z

0

Seems https://www.npmjs.org/package/pointer-cursor might be a good package to use.

answered Nov 26, 2014 at 1:16

stevemao

1,5331 gold badge16 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to change the mouse cursor with javascript without hovering an element?

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related