Pointer cursor overrides wait cursor even with !important

Question

I have clickable elements which I am giving the pointer cursor to with a class. Someone hovers over, they see the pointer cursor as a visual cue that it's clickable. They click which performs an Ajax call. Since the Ajax call is an indeterminate length, I'm attempting to set it up so that the cursor becomes a "wait" cursor on Ajax start, and then reverts on Ajax stop.

HOWEVER... it seems that despite an "!important" declaration on the "wait" class, the pointer still has priority. The net result is that when someone clicks the item, they're not likely to move away from it. They'll just keep the mouse where it is and will wait. So the cursor doesn't get updated.

I have created some straight CSS to show that when you move into an element with pointer, even when it is NOT the "important" declaration, the pointer is taking precedence. Tested in Chrome and Firefox for Windows:

Here's the fiddle: http://jsfiddle.net/3NdYP/

And the relevant code contained therein (CSS truncated):

HTML:

<div id="fakeBody" class="wait">
    <table>
        <tr class="pointer">
            <td>Yup, a pointer row normally...</td>
        </tr>
    </table>            
</div>

CSS:

.pointer {
    cursor: pointer;
}

.wait {
    cursor: wait !important;
}

The "fakeBody" is just for the fiddle. In the real world scenario, it is the body element itself.

Answer 1

try this

   $(document).ajaxStart(function(){
    $('.pointer').addClass("wait");
}).ajaxComplete(function(){
    $('.pointer').removeClass("wait");
});

Answer 2

Because .pointer is nested inside .wait, so its cursor declaration takes precedence. The same thing would happen for any other CSS declaration: background-color, for instance. If you're explicitly telling the child to have a different rule, that will override any inherited styles, even when defined with !important.