Simplest way to set cursor to wait, then have all elements revert back

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.

Answer 2

if you have a wrapper or container:

<script type="text/javascript"> $(document).ajaxStart(function () {     document.body.style.cursor = 'wait';     $('div#wrapper').addClass('wait'); });  $(document).ajaxStop(function () {     document.body.style.cursor = 'auto';     $('div#wrapper').removeClass('wait'); }); </script>  <style type="text/css">     div#wrapper.wait * {         cursor: wait !important;     } </style> 

Basicly all children to the wrapper will get the cursor: wait with the !important condition.