Change Mouse Cursor for whole page?

17,998

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 .

Share:
17,998

Related videos on Youtube

Wesley
Author by

Wesley

Updated on June 04, 2022

Comments

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