Detecting mouse cursor type change in a webpage

Question

Is there any event which is triggered when the mouse cursor changes as it hovers over different page elements ?

Ideally an event like this:

window.onmousecursorchange = function(e) {
    // e would contain information about the cursor
    // eg. e.type could contain 'text','pointer', etc..
}

Note: The solution should not involve jQuery or other libraries

Update:

The 'possible duplicate' question is tagged with jQuery infact all the answers (none of which solve the problem) are based on jQuery. I am looking for a pure JavaScript solution. If the moderators believe this is not enough reason to keep this question open feel free to close.

See [detect cursor type](http://stackoverflow.com/questions/5304668/detect-cursor-type) — Antony, Jan 26 '13 at 17:09

score 2 · Answer 1 · edited Jan 27 '13 at 10:05

2

Yes with event onmouseenter

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

edited Jan 27 '13 at 10:05

j0k

22,600
28
79
90

answered Jan 26 '13 at 17:06

Hary

5,690
7
42
79

wouldn't that only work if the element had its style.cursor property set beforehand ? eg. http://jsfiddle.net/jrHcY/ both items return 'auto' – lostsource Jan 26 '13 at 17:09
@FelixKling you're right seems a bit inconsistent then as it logs 'auto' on Chrome 24 – lostsource Jan 26 '13 at 17:13

score 2 · Answer 2 · edited Mar 12 '20 at 11:38

2

You can try this:

document.addEventListener('mouseover',function(e){
    var cursor = e.target.style.cursor;
    console.log(cursor);
});

It uses event bubbling to increase performance and save code.

edited Mar 12 '20 at 11:38

PedroZorus

661
1
6
21

answered Jan 27 '13 at 12:45

Licson

2,231
18
26

1

Cursor is always and empty string by this method – Mayank Kumar Chaudhari Jan 28 '23 at 08:59

score 1 · Answer 3 · answered Jan 26 '13 at 17:10

1

$(function(){

    $('*').hover(function(){
        $(this).data('hover',1); //store in that element that the mouse is over it
    },

    function(){
        $(this).data('hover',0); //store in that element that the mouse is no longer over it
    });

    window.isHovering = function (selector) {
        return $(selector).data('hover')?true:false; //check element for hover property
    }
});

answered Jan 26 '13 at 17:10

catherine

22,492
12
61
85

This does not detect courser changes and uses a lot of jQuery stuff which is more difficult to replicate (OP did not mention jQuery). – Felix Kling Jan 26 '13 at 17:13
I just paste what I have search. I just want to help. Then if it is wrong so the answer of this person is incorrect http://stackoverflow.com/questions/3395293/how-to-check-if-the-cursor-is-over-an-element. This person got the best answer how sad – catherine Jan 26 '13 at 17:24
1

First of all you should not copy another answer. If another answer truly fits, you should vote to close or flag the question as a duplicate the other question. Secondly, the other question is different (and hence the answer does not fit here). This one is asking how to detect **cursor shape changes**, the other one asks how to detect whether the cursor is **hovering over a given element**. – Felix Kling Jan 26 '13 at 17:32
Yeah sorry I forgot to put a link, I just put it directly and go to other question. I don't know how to vote to close, this is my first time joining stackoverflow. I'm just having fun answering :) – catherine Jan 26 '13 at 17:36

score 0 · Answer 4 · answered Jan 28 '23 at 09:21

0

@Lickson's solution here works only for inline styles. Not for cursor defined in css files. Thus, you need to getComputedStyle

document.addEventListener('mouseover',function(e){
    var cursor = getComputedStyle(e.target).cursor;
    console.log(cursor);
});

answered Jan 28 '23 at 09:21

Mayank Kumar Chaudhari

16,027
10
55
122

This is best answer, however mouseover does not allow for when scrolling. Which means when you scroll with the mouse wheel or trackpad, the change in cursor style does not compute until you stop scrolling, even if the scrolling results in the cursor being passed over a hoverable element. Not found a solution for that yet :( – ToddPadwick Apr 08 '23 at 12:57

Detecting mouse cursor type change in a webpage

4 Answers4