How to check if mouse is still over element in Javascript

Question

I want to write to the console is the user is keeping the mouse over an element for more than 2 seconds, this is the code:

var $els = document.querySelectorAll('#myDiv');
    for(i = 0; i < $els.length; i++) {
        if ($($els[i]).data('track') == 'hover') {
            $els[i].addEventListener('mouseover', function (e) {
                setTimeout(function() {
                    if ($($els[i]).is(':hover')) {
                        console.log('mouse is still over this element');
                    }
                }, 2000);
            });
        }
    }

the message is written to the console after 2 seconds, even if I keep the mouse on the element less than 2 seconds. I am probably missing something in here:

if ($($els[i]).is(':hover')) {

thanks for your help

Possible duplicate of [How to have a mouseover event fire only if the mouse is hovered over an element for at least 1 second?](http://stackoverflow.com/questions/6231052/how-to-have-a-mouseover-event-fire-only-if-the-mouse-is-hovered-over-an-element) — milt_on, Apr 12 '17 at 10:20
[this might help you](http://stackoverflow.com/a/1670561/6139043) — Ulug Toprak, Apr 12 '17 at 10:22
I wonder that it works at all. because `i` inside your event listener will be `$els.length` at the time the event is fired. — Roland Starke, Apr 12 '17 at 10:23
Are you sure the script is using the expected element for checking :hover-status? — K.S., Apr 12 '17 at 10:33

Saurabh Agrawal · Answer 1 · 2020-03-20T12:58:56.293

Create a global variable as

var isMouseHover = false;

Call function on the mouseover call mouseover function and set

isMouseHover = true;

And call mouseout, when mouse out and set

isMouseHover = false;

Use this isMouseHover variable whenever you want.

Try this:

let isMouseHover = false
let test = document.getElementById("test");
test.addEventListener("mouseleave", function (event) {
  isMouseHover = false
  event.target.textContent = "mouse out"
  console.log(isMouseHover)
}, false);
test.addEventListener("mouseover", function (event) {
  isMouseHover = true
  event.target.textContent = "mouse in"
  console.log(isMouseHover)
}, false);

  <div id="test">hover me</div>

this is very good and straight forward strategy to get the job done! — Alexander Cherednichenko, Mar 19 '20 at 21:31

Nico_ · Accepted Answer · 2017-04-12T12:58:06.170

1

Edit : I updated my previous answer with a better solution.

First, you propably have several elements with the same id and it's a bad things, so I changed to a class. Then I updated your code to simplify it and to make it more in the spirit of jQuery :

HTML :

<div class="myDiv" data-track='hover'>
test
</div>
<div class="myDiv" data-track='hover'>
test2
</div>

JavaScript :

$('.myDiv[data-track=hover]').on("mouseenter",function(){
    var $elem = $(this);
  $elem.attr("data-hover",true);
  window.setTimeout(function() {
    if ($elem.attr("data-hover")) {
        console.log('mouse is still over this element');
        console.log($elem);
    }
  }, 2000);
})

$('.myDiv[data-track=hover]').on("mouseenter",function(){
  $(this).attr("data-hover",false);
});

Here is a working jsFiddle.

edited Apr 12 '17 at 12:58

answered Apr 12 '17 at 10:29

Nico_

1,388
17
31

how can I refer to my over element inside if(hover[1]) { ? – user3174311 Apr 12 '17 at 10:38
I think $els[i] should work or you can add a parameter in the function(). – Nico_ Apr 12 '17 at 10:55
maybe I marked this as correct too early, sorry. looks like it is not checking the correct element. if you check console.log(i + ':' + hover[1]); i is always the first element... – user3174311 Apr 12 '17 at 11:28
try to add i as a parameter then : setTimeout(function(i) { if (hover[i]) { console.log('mouse is still over this element'); } }, 2000); – Nico_ Apr 12 '17 at 11:30
not sure how, can you update the answer above to show me please? – user3174311 Apr 12 '17 at 11:37
Done, I simply added the i on the function(). – Nico_ Apr 12 '17 at 11:42
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/141551/discussion-between-user3174311-and-nico). – user3174311 Apr 12 '17 at 11:57
Yes sorry, I didn't put the link of the good version : https://jsfiddle.net/nfx00ygw/7/ it's fixed thanks. – Nico_ Apr 12 '17 at 13:00
I just tried on Chrome (73.0.3683.46) and it still works, I see the log in the console. Can you be more precise on what is not working @SpencerO'Reilly – Nico_ Feb 21 '19 at 10:13
It console logs even if you are not still hovering over the element. I ended up using something like this https://stackoverflow.com/a/6231142/4059832 – Spencer O'Reilly Feb 21 '19 at 18:40

score 1 · Answer 3 · answered Aug 03 '23 at 15:49

1

A much simpler solution is available on all modern browsers.

var element = document.querySelector('#myElement');

if (element.matches(':hover')) {
    console.log('Mouse is over the element now.');
}

answered Aug 03 '23 at 15:49

Jumbo

176
6

How to check if mouse is still over element in Javascript

3 Answers3