CODEWITHSUNDEEP
javascripthover
Cain Nuke
Cain Nuke

Reputation: 3079

javascript function only executed if certain element is NOT being hovered

Hi,

I want a js code to execute only if #onlineusers and its children are NOT being hovered. This is my attempt:

document.getElementById("onlineusers").onmouseout  = function() { setInterval (loadusers, 5000);}

it doesnt work since the function executes no matter what.

What is wrong?

Thank you.

Upvotes: 1

Views: 345

Answers (1)

Spectric
Spectric

Reputation: 31987

Your previous code was not working because if the user's mouse left the element, it would create an interval that never checked again whether the user was hovering over that element.

Instead, you can check whether the element is being hovered over by checking whether it matches the :hover CSS pseudo selector. This eliminates the need to listen for the mouseout event at all:

const toCheckIfHover = document.getElementById("demo");
setInterval(function(){
  if(!toCheckIfHover.matches(':hover')){
     console.log('not hovering over #demo');
  }else{
    console.log('hovering over #demo');
  }
}, 500)
#demo{
  width:100px;
  height:100px;
  border:1px solid;
  background-color:#ededed;
}
<div id="demo"></div>

Upvotes: 1

Related Questions