CODEWITHSUNDEEP
javascriptcsscross-browsermouse-cursor
OmriSh
OmriSh

Reputation: 139

Get actual cursor when type is 'auto'

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?

Upvotes: 13

Views: 669

Answers (2)

Christoph
Christoph

Reputation: 51201

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).

Upvotes: 2

Koby Douek
Koby Douek

Reputation: 16673

The browser determines your cursor as auto because it was never specified by your code. If you want to get the current cursor you would have to set it in your CSS or HTML explicitly for every element you would like to examine.

a {
   cursor: pointer;
}

After specifying it, .css('cursor') will return its type.

Upvotes: 0

Related Questions