Question

I’ve create a fiddle here: http://jsfiddle.net/frgj2/

In it, you’ll see two divs, each of which contain another div. In one, the outer has { cursor: pointer; } and inner has { cursor: wait; }. The other div has this reversed.

In Chrome (at least, haven’t tested others yet), the cursor that is display is the one on the inner div.

I can’t find any documentation that explains how this is determined or if it’s possible to override this behaviour. Can anyone shed some light on this?

If there is a JavaScript solution to this, I’d be open to it.

UPDATE

I added some text into the outer DIV. When you mouse over that, it shows the ‘correct’ cursor.
http://jsfiddle.net/frgj2/2

Answer 1

My guess is that whichever <div> is “on top” will be the one from which the browser will choose to display the cursor (i.e. the browser will display the cursor for whichever element your mouse pointer is “on” or “over”).

If you want the inner and outer divs to have the same cursor without setting it individually, then you could set the cursor once on the outer div and then apply cursor: inherit to the inner div.

Example:

<style type="text/css">
    .foo { cursor: wait; }
    .foo * { cursor: inherit; }
    /* or if it really only needs to be the inner divs */
    . foo div { cursor: inherit; }
</style>

<div class="foo">
    <div class="bar">Message</div>
</div>

Note: cursor: inherit should work in all modern browsers (Chrome 1.0+, Firefox 1.0+, Opera 9.0+, Safari 1.2+, and IE 8.0+).

Source for the compatibility information.