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 almost 2 years
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 over 12 yearsWon't hire zindex elements override that?
-
Wesley over 12 years@MikeChristensen Correct. This won't quite do it.
-
Wesley over 12 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 over 12 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 over 12 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 over 12 yearsSame problem as the other answer - Other CSS elements and classes will override this if they specify a cursor.
-
Marc B over 12 years@mike: there's always
!important
. -
Wesley over 12 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 over 12 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 over 6 yearsCan add as a subclass with !important to preserve without dynamically adding rules.
body.loading-cursor *{ cursor: wait !important; }
-
Charon ME about 2 yearsstill doesn't set the cursor for the whole page when BODY is shorter than 100%