detect when mouse moves outside of an element

Question

mousemove is fired when mouse is moving over an element. How can I detect when the mouse is moving outside of an element? In other words, anywhere on the page besides the div in the snippet. Not when the mouse leaves but fires whenever the mouse is moving outside of the element.

const div = document.querySelector('div');

div.addEventListener('mousemove', function() {
    document.body.classList.add('mouse-moving');
 });

div {
  height: 200px;
  width: 300px;
  background-color: red;
}
.mouse-moving {
  background-color: green;
}

<div></div>

I think I have explained this badly. I want to detect when the mouse is moving outside of the div. Not when it leaves the div. — CalAlt, Apr 13 '18 at 21:29
if it's outside the div, then the div won't get any events about it. — Alnitak, Apr 13 '18 at 21:31
Thanks for taking the time to reply. Yes, @oMiKeY, that is what I want to do. — CalAlt, Apr 13 '18 at 21:33
You can always just put `mousemove` on the entire `body` tag. But please, be sure to use `throttle` or `debounce` if you do. — Gherman, Apr 13 '18 at 21:35
Also, you could inspect weather a tag is under the mouse by querying on it's `:hover` pseudoclass. Check out this: https://stackoverflow.com/questions/8981463/detect-if-hovering-over-element-with-jquery — Gherman, Apr 13 '18 at 21:37

score 1 · Answer 1 · answered Apr 13 '18 at 21:45

You can use onmouseover and onmouseout

const div = document.querySelector('div');

div.onmouseover = ()=> document.body.classList.add('mouse-moving');

 div.onmouseout = ()=> document.body.classList.remove('mouse-moving');

div {
  height: 200px;
  width: 300px;
  background-color: red;
}
.mouse-moving {
  background-color: green;
}

<div></div>

detect when mouse moves outside of an element

1 Answers1