Question

In my website, I have a few CSS classes that set a fixed type of cursor when you mouse over them. I want to set the cursor to the wait image when I make an AJAX call anywhere on the page and then have it revert back to whatever cursor it should be after the AJAX call is complete.

I tried:

$(document).ajaxStart(function () {
    document.body.style.cursor = 'wait';
});

$(document).ajaxStop(function () {
    document.body.style.cursor = 'auto';
});

This doesn’t work when my mouse is over a DOM object with a CSS class that changes the cursor and I’m stumped on how to make it do so.

Currently I have a class:

.pills a:hover
{
    background-color: #0069D6;
    color: #FFFFFF;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    text-decoration:none;
    cursor:pointer;
}

If you mouse over the object in this class, and an Ajax call starts, the cursor still stays as a pointer.

Answer 1

You can use a combination of toggling a class on the body and !important.

http://jsfiddle.net/UGwmv/2/

$("button").click(function(){
   $("body").toggleClass("wait");
   return false; 
});

body.wait, body.wait *{
    cursor: wait !important;   
}

When body has the wait class, everything will show the wait cursor.