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

Answer 1

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>

Answer 2

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.