Change Mouse Cursor for whole page?
Solution 1
Do it at the CSS level:
* {
cursor: pointer;
}
doing it in jquery forces it to iterate every single node in the dom and rewrite its css classes. On a long document, that's a huge waste of time.
Solution 2
try this
$('body').addClass('grabbing');
OR
$(document).addClass('grabbing');
//EDITED ANSWER
$('body').mousedown(function(e){
$(this).css({'cursor':'pointer'});
}).mouseup(function(e){
$(this).css({'cursor':'auto'});
});
If you firebug is on, you can see the changes in body style tag. But some how it's not working. You can take it as a reference and try similar approach the get solution.
Solution 3
Though this is not a direct answer to this question but I want to draw attentions to that we can solve the problem differently.
By putting an empty fullscreen div on top of everything except drop zones, activate it after mousedown
event. So we can simply change cursor for entire screen through :hover
class of that div .
Related videos on Youtube

Wesley
Updated on June 04, 2022Comments
-
Wesley 6 months
I have a drag UI program, where the mouse cursor on the draggable element changes to a grabbing hand on click.
The problem is, I allow the drag to happen anywhere on screen, and the cursor changes over anchor tags, etc...
I've tried
$('*').addClass('grabbing')
, but it's REALLY expensive.Is there a simple easy code efficient way to handle this?
-
Mike Christensen about 11 yearsWon't hire zindex elements override that?
-
Wesley about 11 years@MikeChristensen Correct. This won't quite do it.
-
Wesley about 11 yearsBut this will always be active. The cursor needs to change only while the mouse is down. It needs to happen in Javascript somehow.
-
Marc B about 11 yearsYou can dynamically add/remove css rules via javascript. Just do it from within the onmousedown/onmouseup and it should be quicker than adding/removing classes from every dom node on the page.
-
Wesley about 11 years@Mark B Cool. Can you provide a new answer with an example? I'll give it a shot and if it works right I'll mark it.
-
Mike Christensen about 11 yearsSame problem as the other answer - Other CSS elements and classes will override this if they specify a cursor.
-
Marc B about 11 years@mike: there's always
!important
. -
Wesley about 11 years@MarcB It seems I can add but not remove with this. If you figure out the code and post it as an answer I'll mark it. There is a JQuery Rule plugin that might work.
-
Marc B about 11 years@Wesley: .cssRules and .rules are just arrays. you can use regular array operations to remove a particular rule by deleting its corresponding array element.
-
Alistair R about 5 yearsCan add as a subclass with !important to preserve without dynamically adding rules.
body.loading-cursor *{ cursor: wait !important; }
-
Charon ME 8 monthsstill doesn't set the cursor for the whole page when BODY is shorter than 100%