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.
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>