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.

That is how it normally works. The `.pointer` is more specific to the element. You can instead make it as `.wait, .wait *` which would make it apply for all child elements of `.wait` also when the parent div has `class='wait'`. — Harry, Jul 22 '14 at 15:51
You might benefit from the answer in this [Stackoverflow question](http://stackoverflow.com/questions/5805040/relationship-between-important-and-css-specificity). — Jmh2013, Jul 22 '14 at 15:52

score 6 · Answer 1 · answered Jul 22 '14 at 15:49

6

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.

answered Jul 22 '14 at 15:49

Ben Dyer

1,596
1
11
23

Thanks, Ben. Super useful to at least know what I did wrong. – Greg Pettit Jul 22 '14 at 15:54
That makes sense. I just came to this while wondering why when I had `body { font-size: '15px' !important }` specified, my user agent stylesheet kept changing it to 16px on tables. Your post explains why. Easy enough to fix by changing the selector to `body, body table`, but also very good to keep this point in mind as my application grows. – BobRodes Jun 21 '16 at 22:39

score 5 · Accepted Answer · answered Jul 22 '14 at 15:46

5

try this

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

answered Jul 22 '14 at 15:46

Deathmras

272
1
8

That did the trick. I add wait to both body and .pointer and it works as expected now. Accepting as soon as the timer lets me. ;) – Greg Pettit Jul 22 '14 at 15:54
nice if that helps to you ;) – Deathmras Jul 22 '14 at 15:58

score 0 · Answer 3 · answered Jun 18 '20 at 10:37

If you want to be really sure that the cursor gets set, you can use:

.wait, .wait * {
  cursor: wait;
}

The specifity of the selector should be higher than .pointer so no !important should be needed.

The universal selector should not yield any performance impact here (See https://stackoverflow.com/a/13432169/3778409).

Pointer cursor overrides wait cursor even with !important

3 Answers3