javascript函数仅在某些元素未悬停时执行

Question

嗨，

我希望仅当 #onlineusers 及其子项未悬停时才执行 js 代码。这是我的尝试：

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

它不起作用，因为无论如何该函数都会执行。

怎么了？

谢谢。

Answer 1

您之前的代码不起作用，因为如果用户的鼠标离开该元素，它会创建一个间隔，不会再次检查用户是否将鼠标悬停在该元素上。

相反，您可以通过检查元素是否与:hover CSS 伪选择器匹配来检查元素是否被悬停。这完全消除了监听mouseout 事件的需要：

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>