Get actual cursor when type is 'auto'

Question

I'm using this code to get cursor type (using jQuery):

$('*').mouseenter(function(){
    var cursor = $(this).css('cursor');
    console.log(cursor);
});

But on some elements it prints auto (which is the default option and means that the browser determine the cursor type).

I need to be able to know what the browser actually displays in those cases (i.e. pointer, resize, etc.)

For example: for a link element (tagName=A) it prints 'auto', but displays 'pointer'.

How can I know which cursor type will be eventually displayed on the specific browser? In other words, how can I tell which cursor type the browser will choose?

Is this behavior documented somewhere?

Answer 1

This is determined by the user agent (=browser), which uses the platform specific default cursor for the element you are currently hovering.

general purpose cursors
'auto'
The UA determines the cursor to display based on the current context, specifically: auto behaves as text over text, and default otherwise.

So you cannot possibly tell what the cursor will look like when it is set to auto in the css.

I guessed there should be an overview which html element receives which cursor type so you could just decide based on the element type, but I could not find anything online. Also, there is no guarantee, that a certain browser will actually use that cursor, since auto gives them free reign, which cursor type to use.

The only option to have control over this is to explicitely set the cursor to a specific type. (Also, I would be interested in a detailed use case where you need this).